이 자습서에서는 Apollo 클라이언트와 React 및 TypeScript를 결합하여 프런트엔드 애플리케이션에 동력을 제공하는 방법을 살펴봅니다.Apollo 클라이언트는 강력한 상태 관리, 메모리 캐시, 오류 처리 기능을 내장하고 있기 때문에 좋아합니다.프레젠테이션을 간소화하기 위해서, 우리는 본 프레젠테이션을 위해 어떠한 백엔드 코드도 작성하지 않고, 공개된 SpaceX GraphQL API을 사용할 계획이다.

React 및 TypeScript를 사용하여 Apollo 클라이언트 설치

우리의 생활을 더욱 간단하게 하기 위해서 우리는 create-react-app부터 시작할 것이다. 특히 typescript 템플릿은 다음과 같다.

yarn create react-app apollo-client-react-typescript --template typescript

그런 다음 GraphQL 옆에 Apollo 클라이언트를 설치합니다.

yarn add @apollo/client graphql

@apollo/client 패키지는 상태 관리/캐시와 오류 처리를 포함하고 graphql은 GraphQL 조회를 해석한다.
현재 이 패키지를 설치했습니다. GraphQL 포트와의 통신에 필요한 구축 블록을 만들 것입니다.

Apollo 클라이언트를 사용하여 데이터 가져오기

고객 설정

Apollo 클라이언트는 연결 세부 사항을 지정하는 대상입니다.ApolloClient을 만들려면 다음 매개변수를 구조 함수에 설정해야 합니다.

uri: ApolloClient을 사용할 때 조회할 GraphQL URL

cache: Apollo 클라이언트가 컴퓨터에 결과를 저장하는 방법을 알려주는 캐시 구성

우리의 아폴로 고객은 다음과 같다.

const client = new ApolloClient({
  uri: 'https://api.spacex.land/graphql/',
  cache: new InMemoryCache()
});

아폴로 회사를 세우다

React 구성 요소에서 이 Apollo 클라이언트 실례를 사용할 수 있도록, 우리는 ApolloProvider이라는 특정 구성 요소로 React 구성 요소를 포장해야 한다.그것은 client, ApolloClient의 실례를 받아들인다.

Apollo Provider를 React 어셈블리에 연결

지금은 ApolloClient의 실례를 ApolloProvider 구성 요소에 전달할 때다.
가장 좋은 방법은 최고급 구성 요소(예를 들어 우리 프로그램의 index.tsx)를 사용하면 모든 하위 구성 요소가 같은 공급자를 통해 Apollo 클라이언트에 접근할 수 있다.index.tsx의 주요 구성 요소를 열어 ApolloProvider의 인스턴스를 ApolloClient으로 포장합니다.

import App from './App';
import { ApolloProvider } from '@apollo/client/react';
import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://api.spacex.land/graphql/',
  cache: new InMemoryCache()
});

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Apollo 클라이언트 및 TypeScript를 사용하여 데이터 조회

현재, 우리는 App으로 ApolloProvider React 구성 요소를 포장하였으며, 우리는 약간의 조회를 진행할 준비가 되어 있다.GraphiQL은 GraphiQL 인터페이스 덕분에 GraphiQL API를 발견하는 간단한 방법을 제공했다.
질의할 항목이 아직 결정되지 않은 경우 SpaceX API의 대화형 브라우저 https://api.spacex.land/graphql/을 참조하십시오.
id, 이름, 위키백과 링크, 스페이스X 로켓에 대한 간략한 설명을 되돌려 주는 검색어를 만들고 싶습니다.
GraphQL 문법에 익숙하지 않다면 https://graphql.org/learn/queries/을 방문하는 것을 권장합니다.
질의는 다음과 같습니다.

{
  rockets {
    id
    name
    wikipedia
    description
  }
}

단일 로켓의 유형을 설명합니다.

interface RocketData {
  id: string;
  name: string;
  wikipedia: string;
  description: string;
}

잊지 마세요. 우리는 이곳에서 일련의 로켓을 수신할 것이기 때문에 우리도 그것을 위해 유형을 만들 것입니다.

interface RocketsResult {
  rockets: Array<RocketData>;
}

이 질의를 실행하려면 Apollo 클라이언트에서 제공하는 useQuery 훅과 gql 함수를 사용합니다.

import { useQuery, gql } from '@apollo/client';

const ROCKETS = gql`
  rockets {
    id
    name
    wikipedia
    description
  }
`;

function App() {
  const { loading, error, data } = useQuery<RocketsResult>(ROCKETS);

  return (
    <>
      <h1>SpaceX Rockets</h1>
      {loading || !data ? (<p>Loading...</p>) :
        data.rockets.map(rocket => (
          <div key={rocket.id}>
            <h2><a href={rocket.wikipedia}>{rocket.name}</a></h2>
            <p>{rocket.description}</p>
          </div>
        ))
      }
    </>
  );
}

export default App;

useQuery의 첫 번째 유형은GraphQL 단점에서 수신할 데이터 구조에 대응하는 유형입니다.useQuery 갈고리는 다음과 같은 속성을 가진 대상을 되돌려줍니다.loading: Apollo 클라이언트가 질의 결과를 기다리고 있는지 여부를 나타냅니다.error: 질의에 오류가 발생한 경우data:GraphQL 쿼리 결과
현재 yarn start으로 프로그램을 실행할 수 있습니다. 브라우저에서 비슷한 내용을 볼 수 있을 것입니다.

Apollo 클라이언트를 사용하여 데이터 수정

이제 Apollo 클라이언트를 사용하여 데이터를 얻는 방법을 알았습니다. GraphQL 포트의 다른 쪽에서 데이터를 업데이트하는 방법을 보게 되어 기쁩니다.
SpaceX API는 사용자를 추가하기 위한 간단한 인터페이스를 제공합니다.
변형 질의를 작성할 때 질의와 동일한 gql 함수를 사용합니다.

const ADD_USER = gql`
  mutation InsertUser($name: String!) {
    insert_users(objects: { name: $name }) {
      returning {
        id
        name
      }
    }
  }
`;

검색과 달리 서명과 유사한 기능이 있다는 것을 알 수 있을 것이다.insert_user이면 objects: { name: $name }을 받는다.
이 변이에서 얻은 데이터 형식을 설명하기 위해 스크립트 형식을 정의합니다.이러한 유형은 GraphQL 엔드포인트에서 응답을 포맷하는 방법에 따라 크게 달라집니다.우리의 사례에서 유형은 다음과 같다.

interface UserDetails {
  id: string;
  name: string;
}

interface AddUserResponse {
  returning: Array<UserDetails>;
}

useMutation 쿼리에는 다음과 같은 서명이 있습니다.

  const [addUser, { data: userData }] = useMutation<
    { insert_users: AddUserResponse }
  >(ADD_USER);

중요한 것은 우리가 갈고리를 정의할 때 돌연변이를 사용하지 않는다는 것이다.이것은 함수를 되돌려줍니다. 예를 들면 addUser입니다. 우리는 필요한 매개 변수를 사용하여 이 함수를 호출해야 합니다.userQuery 갈고리와 같이 useMutation으로 전송되는 유형은 이 변수를 호출한 후 서버에서 돌아오는 응답과 일치해야 합니다.
이제 이 모든 것을 함께 놓아두자.

interface UserDetails {
  id?: string;
  name: string;
}

interface AddUserResponse {
  returning: Array<UserDetails>;
}

function App() {
  const [name, setName] = useState('');

  const [addUser, { data: userData }] = useMutation<
    { insert_users: AddUserResponse }
  >(ADD_USER);

  function handleOnChange(e: React.ChangeEvent<HTMLInputElement>) {
    setName(e.target.value);
  }

  async function handleOnSubmit(e: React.FormEvent) {
    e.preventDefault();
    await addUser({ variables: { name }});
    setName('');
  }

  return (
    <>
      <h1>Users</h1>
      <form onSubmit={handleOnSubmit}>
        <label htmlFor="username">Name: </label>
        <input required name="username" type="text" onChange={handleOnChange} value={name}/>
        <button type="submit">Add User</button>
        <p>
          New User ID: {userData && userData.insert_users.returning[0].id}
        </p>
      </form>
    </>
  );
}

다음은 브라우저에서 볼 내용입니다.

축하합니다. SpaceX API 데이터베이스에 새 사용자가 추가되었습니다.
이 프레젠테이션 항목은 GitHub에서 사용할 수 있습니다.
다음은요?Apollo GraphQL의 기능에 대해 더 알고 싶으시면 Subscriptions 인터페이스와 Fragments 논리를 살펴보시기 바랍니다.
일부 프로젝트에서 GraphQL을 사용하고 계십니까?너는 그것이 다른 것을 대체할 것이라고 생각하니?