Next.js中的GraphQL文件（附代码）简介 Next.js允许利用GraphQL API，但根据文档、教程或网上

简介

Next.js允许利用GraphQL API，但根据文档、教程或网上找到的其他资源，其实现可能不太清楚。大多数这样的资源（使用Apollo）会在组件中使用查询字符串如

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

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

虽然这不是不正确的，但这样的实现失去了IDE的好处，因为它被包裹在一个JavaScript字符串中，可以对查询进行格式化、过滤等。相反，我们要充分利用将GraphQL调用分离到不同的文件中的优势，如.graphql 或.gql ，就像我们对Markdown的.md 或对JSON内容的.json 。

Next.js和Webpack

为了在Next.js中使用.graphql 文件，我们必须配置Next.js提供的webpack配置。为了做到这一点，在你的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;
  }
};

上面的代码所做的是告诉Next.js的webpack配置通过graphql-tag loader解析.graphql 或.gql 文件。为了使其发挥作用，请在应用程序的根层安装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

如果使用TypeScript和Next.js，你可能会发现新的导入会导致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文件进行查询，只需要对上述配置做一些改变。一个完整的工作实例可以在reporichardtorres314/graphql-files中找到。