Next.js의 GraphQL 파일

소개

Next.js를 사용하면 GraphQL API를 사용할 수 있지만 설명서, 자습서 또는 온라인에서 찾은 기타 리소스를 기반으로 구현이 명확하지 않을 수 있습니다. 이러한 대부분의 리소스(Apollo 사용)는 다음과 같은 구성 요소의 쿼리 문자열을 사용합니다.

const GET_MISSIONS = gql`
  query missions {
    launchesPast {
      mission_name
    }
  }
`;

function Missions() {
  const { loading, error, data } = useQuery(GET_MISSIONS);
}

이것이 잘못된 것은 아니지만 이러한 구현은 JavaScript 문자열로 래핑되기 때문에 쿼리를 형식화하고 보푸라기 등을 수행할 수 있는 IDE의 이점을 잃습니다. 대신, Markdown의 경우 .graphql 또는 JSON 콘텐츠의 경우 .gql와 같이 GraphQL 호출을 .md 또는 .json와 같은 개별 파일로 분리하는 것을 최대한 활용하려고 합니다.

Next.js와 웹팩

Next.js에서 .graphql 파일을 사용하기 위해서는 Next.js가 제공하는 웹팩 구성을 구성해야 합니다. 이렇게 하려면 Next.js 애플리케이션의 루트 수준에서 next.config.js 파일을 생성하거나 편집합니다.

module.exports = {
  webpack: (config, options) {
    config.module.rules.push({
      test: /\.(graphql|gql)/,
      exclude: /node_modules/,
      loader: "graphql-tag/loader"
    });

    return config;
  }
};

위의 코드가 하는 일은 .graphql 로더를 통해 .gql 또는 graphql-tag 파일을 구문 분석하도록 Next.js의 웹팩 구성에 지시하는 것입니다. 이것이 작동하려면 응용 프로그램의 루트 수준에 graphql를 설치하십시오.

npm install graphql-tag

이제 이전 구성 요소를 리팩터링하여 새 파일 형식을 사용할 수 있습니다.

import { missions } from 'queries/mission.graphql';

function Component() {
  const { loading, error, data } = useQuery(missions);
}

새.graphql 파일에서 내보내고 구성 요소에서 사용할 수 있는 각 쿼리를 나열할 수 있습니다.

query missions {
  launchesPast {
    title
    author
  }
}

Next.js 및 TypeScript

Next.js와 함께 TypeScript를 사용하는 경우 새 가져오기로 인해 모듈이나 유형 선언이 없다는 TypeScript 경고가 표시될 수 있습니다.

Cannot find module 'queries/mission.graphql' or its corresponding type declarations.ts

이 문제를 해결하려면 사용자 정의 유형 정의를 작성해야 합니다. 아직 사용자 지정 유형이 없는 경우 @types 파일을 사용하여 응용 프로그램의 루트 수준에 graphql.d.ts 폴더를 만듭니다. 이 새 파일에서 해당 모듈을 선언합니다.

declare module '*.graphql'

.gql 파일을 사용하는 경우 내부에 gql.d.ts가 기록된 declare module '*.gql' 파일을 만듭니다.

결론

Next.js는 GraphQL API를 허용하고 쿼리에 별도의 GraphQL 파일을 활용하는 기능을 활용하려면 위에서 언급한 것처럼 구성을 약간만 변경하면 되는 강력한 프레임워크입니다. 전체 작업 예제는 저장소richardtorres314/graphql-files에서 찾을 수 있습니다.