React-Apollo 적용

설치

yarn add apollo-boost
yarn add react-apollo
yarn add graphql

index.tsx

import { ApolloProvider } from 'react-apollo';
import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: "https://countries.trevorblades.com",
});

ReactDOM.render(
  <StrictMode>
    <ApolloProvider client={client}>
    <BrowserRouter>
      <Route path={ '/login' } component={LoginPage} />
      <Route component={App} />
    </BrowserRouter>
    </ApolloProvider>
  </StrictMode>,
  document.getElementById('root')
);

components

import { gql } from "apollo-boost";
import { OperationVariables, Query, QueryResult } from "react-apollo";

const GET_CONTINENTS = gql`
  query {
    continents {
      code
      name
    }
  }
`;

<Query query={GET_CONTINENTS}>
  {
    ({ loading, error, data }:QueryResult<any, OperationVariables>) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error!(</p>;
      return (
        <ul>
          {
            data.continents.map(
              ({ code, name }:any) => (
                <li key={code}>{name}</li>
              )
            )
          }
        </ul>
      );
    }
  }
</Query>