从 GraphQL 服务端获取数据的方式有很多种，比如服务端提供的 SSG 和 SDK，但是我会介绍一下我最近使用的 Apollo Client，因为它好用。
实现示例使用 Next.js 从 GitHub GraphQL API 获取数据。
为什么推荐 Apollo Client
官方网站这有多种原因，但我认为最大的原因是默认提供了useQuery钩子。
这消除了为数据获取编写自己的代码的需要，并允许使用比以前更短的代码来实现。
另外useQuery好像功能很多，但是还没有掌握，还请谅解。
环境
- Next.js
- 准备好使用 GitHub GraphQL API 获取数据
（已获得 GitHub 令牌，并已使用 Explorer 等创建查询。）
*我将省略如何使用 GraphQL API。
实现1包安装
从 1 到 5官方网站步骤 2 到 5 按原样引用。由于实现的基础是官方文档，我们建议您先查看官方文档并尝试一下，如果遇到困难，请使用参考站点。我也很在意。现实很残酷，但是……眼泪
按照步骤 2 进行安装
npm install @apollo/client graphql
或者
yarn add @apollo/client graphql
请安装
实现2 ApolloClient实例的初始化（客户端信息的创建）
创建一个新的 ApolloClient 实例。
uri 指定端点。GitHub GraphQL API 端点在这里
虽然它不在官方示例中，但您需要在实例创建期间对用户进行身份验证的信息。
在 GitHub GraphQL API 的情况下，headers 中需要访问令牌信息，所以我添加了它。
严禁直接写入访问令牌信息。使用环境变量。
由于lib经常用于与库相关的文件，因此我在以下路径中创建了它。
/src/lib/apollo/apolloClient.ts
export const apolloClient = new ApolloClient({
cache: new InMemoryCache(),
headers: { authorization: `Bearer ${process.env.GH_TOKEN}` },
uri: "https://api.github.com/graphql",
});
实施 3 设置客户端信息。
导入在第 2 部分中创建的客户端信息并将其传递给 React 端。
首先，导入_app.tsx(jsx)中创建的客户端信息（第二部分创建的apolloClient）和ApolloProvider。
通过包装 <Component {...pageProps} /> 将 ApolloProvider 放置为组件。
剩下的就是将导入的客户端信息作为参数传递给 ApolloProvider 组件。
下面是 _app.tsx(jsx) 的示例。
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { ApolloProvider } from "@apollo/client";
import { apolloClient } from "src/lib/apollo/apolloClient";
function MyApp({ Component, pageProps }: AppProps) {
return (
<ApolloProvider client={apolloClient}>
<Component {...pageProps} />
</ApolloProvider>
);
}
export default MyApp;
这部作品可以从任何页面获取数据现在太棒了！
实现 4 使用 useQuery 获取数据
在第 3 部分中，我告诉过您可以从任何页面获取数据，但该方法使用 useQuery。
首先，为 Next.js 的 pages 下的任何页面创建一个文件。
接下来，定义用于从该页面中的端点获取数据的查询信息。
内容是按最新更新的顺序获取5个repository，设置成可以获取repository的创建日期、更新日期、URL信息等。
const GET_REPOSITORIES = gql`
query UseGitHubInfo {
user(login: "topaoad") {
name
url
repositories(last: 5, orderBy: { field: UPDATED_AT, direction: ASC }) {
totalCount
nodes {
name
description
createdAt
updatedAt
url
forkCount
stargazerCount
languages(orderBy: { field: SIZE, direction: DESC }, last: 10) {
totalCount
totalSize
edges {
node {
id
name
color
}
size
}
}
}
}
}
}
`;
如果您尚未创建查询，请在下面的页面上进行。
然后使用前面定义的查询信息使用 useQuery 进行获取。
在页面主要组件的return语句之前写下以下内容。
然后，根据之前的查询信息，从 GitHub GraphQL API 中获取数据并存储在 data 中。
之后，使用通过 data 获得的数据，并使用 map 函数等实现它！ ！
const Apollotest: NextPage = () => {
const { data, error, loading } = useQuery<UseGitHubInfoQuery>(
GET_REPOSITORIES
);
return
};
export default Apollotest;
实施 5 定义采集数据的类型。
官网的资料到此就结束了，但其实我还想做一件事。
那就是“自动输入获取的数据”。
您是否注意到 4 useQuery 有一个名为 <UseGitHubInfoQuery> 的泛型类型定义？
这是引用使用 GraphQL 代码生成器创建的类型定义文件。
有关如何创建它的详细信息，请参阅本文。
引用文件的简要说明是创建类型定义文件时设置为标准的插件
“Tpescript-operations”自动创建与查询配对的类型定义。
我正在利用这一点。
类型的类型定义名称为“你的查询名称+查询”。
我命名的查询名称是 UseGitHubInfo，因此下面的示例将是 UseGitHubInfoQuery。
export type UseGitHubInfoQuery = {
__typename?: "Query";
user?: {
__typename?: "User";
name?: string | null;
url: any;
repositories: {
__typename?: "RepositoryConnection";
totalCount: number;
nodes?: Array<{
__typename?: "Repository";
name: string;
description?: string | null;
createdAt: any;
updatedAt: any;
url: any;
forkCount: number;
stargazerCount: number;
languages?: {
__typename?: "LanguageConnection";
totalCount: number;
totalSize: number;
edges?: Array<{
__typename?: "LanguageEdge";
size: number;
node: {
__typename?: "Language";
id: string;
name: string;
color?: string | null;
};
} | null> | null;
} | null;
} | null> | null;
};
} | null;
};
将鼠标悬停在数据上以检查类型是否正确。
那么你就可以确定你做对了！
概括
这是官方网站上的基本解释，但最后我还解释了带有额外 alpha 的自动输入。
我仍然沉迷于许多事情，因为我仍然无法应用它，但我认为通过尽可能多地理解这个概念来提高我的技能是必不可少的。
如果您有任何意见，请随时告诉我们。
也欢迎在 Twitter 上发送消息！
原创声明：本文系作者授权爱码网发表，未经许可，不得转载;
原文地址：https://www.likecs.com/show-308628093.html