Next.js 中使用 GraphQL 来访问外部的 API-JavaScript中文网-JavaScript教程资源分享门户

在开发现代网站和应用程序时，前端工程师需要经常使用各种 API 以获取数据。GraphQL 是一种流行的数据查询语言，它可以让前端开发人员按需获取数据，而不是从 API 中获取整个数据集合。Next.js 是一种流行的 React 框架，它可以很方便地与 GraphQL 一起使用。在本文中，我们将探讨如何使用 Next.js 和 GraphQL 访问外部的 API。

前提条件

在开始之前，请确保您已经安装好了以下工具：

Node.js
Yarn 或 npm
一个 GraphQL API，例如 Github GraphQL API

什么是 Next.js？

Next.js 是一个 React 框架，它提供了一个为 React 应用程序构建的服务器渲染的框架。它的特点包括：

自动代码拆分
它自带的样式和 CSS 模块化
静态文件服务

Next.js 具有良好的开箱即用功能，并提供了一种将 React 应用程序构建为服务端渲染的方式。

什么是 GraphQL？

GraphQL 是一种数据查询语言，用于 API 的查询、变更和订阅。它使得前端开发人员可以按需获取数据，并允许 API 以一种更灵活和高效的方式提供数据。

GraphQL 提供了一种描述数据的方式，称为 schema。每个 GraphQL API 都有一个 schema，它定义了可用的查询和变更操作。查询是用于从 API 中获取数据的操作，而变更是允许您对 API 中的数据进行修改的操作。

使用 Next.js 和 GraphQL 访问外部的 API

下面是如何使用 Next.js 和 GraphQL 访问外部 API 的步骤：

创建一个 Next.js 应用程序。
```
npx create-next-app my-app
```
安装所需的包。
```
yarn add graphql apollo-boost
```
创建一个 GraphQL 客户端。
```
// javascriptcn.com 代码示例
import ApolloClient from "apollo-boost";
import fetch from "isomorphic-unfetch";

const client = new ApolloClient({
  uri: "https://api.github.com/graphql",
  fetch
});

export default client;
```
在上面的代码中，我们使用了 ApolloClient 包来创建我们的 GraphQL 客户端。我们使用了 GitHub GraphQL API 作为示例，并将其作为我们的 URI 传递给了 ApolloClient。我们还使用了一个名为 isomorphic-unfetch 的包来实现客户端/服务器端的数据获取。

创建一个 GraphQL 查询。

// javascriptcn.com 代码示例
import { gql } from "apollo-boost";

const query = gql`
  query {
    viewer {
      login
      name
    }
  }
`;

export default query;

在上面的代码中，我们定义了一个名为 query 的 GraphQL 查询，并使用带参的模板字面量将其定义为字符串。

使用 ApolloProvider 包裹我们的应用程序。

// javascriptcn.com 代码示例
import App from "next/app";
import { ApolloProvider } from "@apollo/react-hooks";
import client from "../graphql/client";

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <ApolloProvider client={client}>
        <Component {...pageProps} />
      </ApolloProvider>
    );
  }
}

在上面的代码中，我们将 ApolloProvider 包装在我们的 Next.js 应用程序周围，并提供了我们之前创建的 Apollo 客户端。

使用 useQuery Hook 查询数据。

// javascriptcn.com 代码示例
import { useQuery } from "@apollo/react-hooks";
import query from "../graphql/query";

export default function Home() {
  const { loading, error, data } = useQuery(query);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;
  return (
    <div>
      <p>{data.viewer.name}</p>
      <p>{data.viewer.login}</p>
    </div>
  );
}

在上面的代码中，我们使用 useQuery Hook 查询 GitHub API。useQuery Hook 返回一个包含 loading、error 和 data 的对象。根据数据是否加载成功，我们可以渲染 UI 组件。在上面的示例中，我们直接输出了 GitHub 认证用户的相应信息。

运行应用程序并查看结果。

在终端中运行以下命令：
```
yarn dev
```
然后，打开 http://localhost:3000/ 查看结果。

总结

在这篇文章中，我们发现了如何使用 Next.js 和 GraphQL 来访问外部 API。我们创建了一个 GraphQL 客户端，定义了一个查询，并使用 useQuery Hook 从 API 中获取数据。通过使用 Next.js 和 GraphQL，我们可以更灵活地获取数据，并使数据渲染更快。如果您想要了解更多关于 Next.js 和 GraphQL 的信息，请参考 Next.js 和 Apollo(GraphQL) 的官方文档。

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