Next.js 中如何使用 Graphql？-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是现代化的 API 查询语言和运行时，它是面向客户端的 API，由 Facebook 开发并首次在 2015 年公开发布。GraphQL 旨在解决 REST API 的缺点，如过度获取或未能满足查询需求等问题。它支持前端和后端开发人员在相同的查询语言中编写、测试和部署 API。在 Next.js 中使用 GraphQL 可以简化前端的数据获取过程并提高系统的性能。

步骤

要在 Next.js 中使用 GraphQL，有以下几个步骤：

正确安装必需的 NPM 软件包。

GraphQL 的开发商提供了很多不同的库，用来支持在不同环境中实现 GraphQL。要在 Next.js 中使用 GraphQL，您需要安装一些关键的 NPM 软件包以便能够整合 GraphQL 查询和响应。这些软件包的安装方法如下：

npm install apollo-boost graphql react-apollo

向 Next.js 应用程序中添加一个 Apollo 客户端。

通过将 Apollo 客户端添加到 Next.js 应用程序中，您可以简化用于获取和处理数据的工作流。要添加 Apollo 客户端，请完成以下步骤：

首先，在 Next.js 应用程序中创建一个新文件夹（例如，设置名为 lib），然后在其中添加一个新文件（例如，命名为 client.js）。您可以使用以下代码初始化 Apollo 客户端：

import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

const GRAPHQL_ENDPOINT = '[YOUR_API_ENDPOINT]';

const httpLink = new HttpLink({
  uri: GRAPHQL_ENDPOINT,
});

const cache = new InMemoryCache();

const client = new ApolloClient({
  link: httpLink,
  cache: cache,
});

export default client;

其中，GRAPHQL_ENDPOINT 是您的 GraphQL API 端点的 URL。此代码创建了一个 Apollo 客户端实例并将其放置于私有命名空间中，以便其他组件可以使用它来发出数据查询和更改请求。

接下来，您需要确保 Next.js 应用程序可以访问此客户端。要做到这一点，请在 Next.js 应用程序中创建一个高阶组件并返回一个新的组件，该组件可以访问 Apollo 客户端。以下代码演示了如何完成此操作：

import React from 'react';
import { ApolloProvider } from 'react-apollo';
import ApolloClient from './client';

export function withApollo(Component) {
  return function WithApollo({ ...props }) {
    return (
      <ApolloProvider client={ApolloClient}>
        <Component {...props} />
      </ApolloProvider>
    );
  };
}

此高阶组件将 Apollo 客户端提供程序包装在 Next.js 应用程序中的组件中。请注意，此代码中的 ApolloProvider 组件始终从名为 client 的默认导入中检索客户端实例。

向 Next.js 中添加 graphQL 查询。

现在您已经成功安装了必需的 NPM 软件包和初始化了 Apollo 客户端，接下来需要使用 GraphQL 查询定义并发送数据请求。您可以通过创建一个 JavaScript 模块来完成此操作，该模块导出一个 query 变量和一个函数，其中该函数使用 Apollo 客户端来执行查询并返回结果。以下代码演示了如何创建这样的模块：

import gql from 'graphql-tag';
import ApolloClient from './client';

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

export async function getPosts() {
  const { data } = await ApolloClient.query({
    query: GET_POSTS,
  });
  return data.posts;
}

此代码定义了一个名为 GET_POSTS 的 GraphQL 查询，并实现了一个名为 getPosts 的函数，该函数使用 Apollo 客户端查询从 GraphQL API 中检索所有帖子。请注意，此 codepen import 了 ApolloClient from './client'，此代码中的 gql 组件来自导入 graphql-tag。您可以通过更改此查询和相关函数来创建任意数量的查询和 API 调用，来满足您的业务需求。

案例分析：使用 Next.js 和 GraphQL 获取数据

假设您的 Next.js 应用程序需要从远程 GraphQL API 加载数据并在页面中呈现。下面是一些代码片段，该示例演示了如何加载 GraphQL 数据并在 Next.js 中使用它渲染组件。

为了设置这个例子，您需要一个远程服务器和 GraphQL API。 Facebook 提供了一个简单的 GraphQL API（https://swapi-graphql.netlify.app/.），其允许您从“星球大战”的官方 API 中加载数据。无论您使用哪个 GraphQL API，都可以使用下面的示例代码来说明如何使用GraphQL API 加载和渲染数据。

首先在 Next.js 应用程序中创建一个空白页面（如 index.js），然后添加以下内容以在加载组件时加载限定的 GraphQL 数据：

import { withApollo } from '../lib/apollo';
import { gql } from 'graphql-tag';
import Link from 'next/link';
import { useQuery } from '@apollo/react-hooks';

const STARSHIP_DATA = gql`
  query {
    allStarships {
      edges {
        node {
          name
        }
      }
    }
  }
`;

function HomePage() {
  const { loading, error, data } = useQuery(STARSHIP_DATA);

  if (loading) {
    return <div>Loading ...</div>;
  }
  if (error) {
    console.error(error);
    return <div>Error loading posts.</div>;
  }

  return (
    <div>
      <h1>Star Wars Starships</h1>
      <ul>
        {data.allStarships.edges.map(({ node }) => (
          <li key={node.name}>
            <Link href={`/starship/${encodeURIComponent(node.name)}`}>
              <a>{node.name}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default withApollo(HomePage);

在此代码中，使用用于 Next.js 的 Apollo 高阶组件的 withApollo 方法，在页面组件 HomePage 上注入了 Apollo 客户端（间接通过 useQuery 标记）。然后使用 useQuery 将 GraphQL 查询和 React 组件进行了绑定。

总结

GraphQL 是一种先进的 API 语言和运行时，用于更高效、更透明地创建更好的 API。Next.js 可使您使用 GraphQL 更轻松地获取数据并将其用于创建用户界面。随着您的 Next.js 应用程序的规模和复杂性的增加，使用 GraphQL 的好处将变得更加明显。上述指南包含了使用 GraphQL 和 Next.js 的基础知识，以及演示了如何加载和渲染 GraphQL 数据的示例代码。现在，通过这些知识来开始构建您的 Next.js 应用程序，从而加速开发和优化代码。

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

Next.js 中如何使用 Graphql？

步骤

案例分析：使用 Next.js 和 GraphQL 获取数据

总结

纠错反馈