如何在 Next.js 中使用 GraphQL

GraphQL 是一种用于 API 的查询语言，它可以让前端开发者更加灵活地请求数据。Next.js 是一个用于构建 React 应用程序的框架，它可以与 GraphQL 很好地集成。本文将介绍如何在 Next.js 中使用 GraphQL。

安装依赖

在开始之前，需要安装以下依赖：

• apollo-client：用于在客户端使用 GraphQL。
• apollo-server-micro：用于在服务器端使用 GraphQL。
• graphql：GraphQL 的核心包。

可以使用以下命令进行安装：

npm install apollo-client apollo-server-micro graphql

在客户端使用 GraphQL

在 Next.js 中，可以使用 getStaticProps 或 getServerSideProps 方法从服务器获取数据。这里我们将使用 getStaticProps 方法。

首先，在页面组件中导入 apollo-client，并创建一个 Apollo 客户端：

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:3000/api/graphql',
  cache: new InMemoryCache(),
});

在上面的代码中，我们指定了 GraphQL API 的 URL，并创建了一个缓存对象。现在我们可以使用 client 对象来发送 GraphQL 查询了。

假设我们有一个 posts 查询，用于获取博客文章的列表。我们可以使用以下代码来发送查询：

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

const GET_POSTS = gql`
  query {
    posts {
      id
      title
      content
    }
  }
`;

export async function getStaticProps() {
  const { data } = await client.query({
    query: GET_POSTS,
  });

  return {
    props: {
      posts: data.posts,
    },
  };
}

在上面的代码中，我们首先使用 gql 函数定义了一个查询。然后，我们在 getStaticProps 方法中使用 client.query 方法发送查询，并将结果作为 props 对象返回。

现在我们可以在页面组件中使用 props.posts 来渲染博客文章的列表了。

在服务器端使用 GraphQL

在 Next.js 中，可以使用 pages/api 目录中的文件来创建 API。我们将在这里创建一个 GraphQL API。

首先，在 pages/api 目录中创建一个 graphql.js 文件，然后导入 apollo-server-micro 和 graphql：

import { ApolloServer } from 'apollo-server-micro';
import { makeExecutableSchema } from 'graphql-tools';
import { typeDefs } from './schema';
import { resolvers } from './resolvers';

const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
});

const server = new ApolloServer({
  schema,
});

export const config = {
  api: {
    bodyParser: false,
  },
};

export default server.createHandler({ path: '/api/graphql' });

在上面的代码中，我们首先使用 makeExecutableSchema 函数创建一个 GraphQL schema。然后，我们创建了一个 Apollo 服务器，并将 schema 传递给它。最后，我们将服务器的处理程序导出，并将其绑定到 /api/graphql 路径上。

现在，我们需要定义 schema 和 resolvers。在 pages/api 目录中创建一个 schema.js 文件，然后定义一个 typeDefs 对象：

export const typeDefs = `
  type Post {
    id: ID!
    title: String!
    content: String!
  }

  type Query {
    posts: [Post!]!
  }
`;

在上面的代码中，我们定义了一个 Post 类型，它包含 id、title 和 content 字段，以及一个 Query 类型，它包含一个 posts 查询。

接下来，在 pages/api 目录中创建一个 resolvers.js 文件，然后定义一个 resolvers 对象：

const posts = [
  {
    id: '1',
    title: 'Hello, world!',
    content: 'This is my first post.',
  },
  {
    id: '2',
    title: 'Goodbye, world!',
    content: 'This is my last post.',
  },
];

export const resolvers = {
  Query: {
    posts: () => posts,
  },
};

在上面的代码中，我们定义了一个 posts 数组，它包含两个博客文章。然后，我们定义了一个 Query 类型的解析器，它返回 posts 数组。

现在，我们可以启动 Next.js 应用程序，并尝试从客户端发送 GraphQL 查询，或从浏览器中打开 /api/graphql 路径来测试 API。

总结

在本文中，我们介绍了如何在 Next.js 中使用 GraphQL。我们首先在客户端使用 apollo-client 发送 GraphQL 查询，然后在服务器端使用 apollo-server-micro 创建了一个 GraphQL API。希望本文能够帮助你更好地使用 Next.js 和 GraphQL。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bdf157add4f0e0ff78ba94