[javascript] Parcel에서 Apollo Client를 사용하는 방법은?

22 Nov 2023

javascript

프로젝트 설정: Parcel 프로젝트를 설정하기 위해 필요한 패키지를 설치합니다. 터미널에서 프로젝트 폴더로 이동하고 다음 명령을 실행합니다:

npm init -y
npm install graphql apollo-boost react react-dom

Apollo Client 설정: Apollo Client를 설정하기 위해 클라이언트 객체를 생성하고 GraphQL API 엔드포인트를 설정합니다. 프로젝트의 index.js 파일을 열고 다음 코드를 추가합니다:

import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql', // GraphQL API 엔드포인트 설정
});

// Apollo Provider를 사용하여 애플리케이션에 Apollo Client를 제공
ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

GraphQL 쿼리 실행: Apollo Client를 사용하여 GraphQL 쿼리를 실행해보세요. 예를 들어, App 컴포넌트에서 getTodos 쿼리를 실행하고 결과를 화면에 표시하려면 다음과 같이 작성할 수 있습니다:

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

const GET_TODOS = gql`
  query {
    todos {
      id
      text
      completed
    }
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_TODOS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      {data.todos.map(todo => (
        <div key={todo.id}>{todo.text}</div>
      ))}
    </div>
  );
}

애플리케이션 빌드: Parcel을 사용하여 애플리케이션을 빌드합니다. package.json 파일에 다음 스크립트를 추가하고 터미널에서 npm run build를 실행하세요:

"scripts": {
  "start": "parcel index.html",
  "build": "parcel build index.html"
}

위의 단계를 따르면 Parcel과 Apollo Client를 함께 사용하는 간단한 웹 애플리케이션을 설정할 수 있습니다. Parcel의 간편한 설정과 Apollo Client의 쉬운 사용으로 웹 개발을 더욱 효율적으로 진행할 수 있습니다.