如何使用GraphQL和Apollo构建一个宝可梦应用

宝可梦是一个由视频游戏、动画系列与电影、交换卡牌游戏以及其他相关媒体组成的日本媒体特许经营权。

在本文中，我们将使用一个宝可梦GraphQL API，该API提供有关不同宝可梦的数据。

我们将使用Apollo和GraphQL来处理数据获取，以及React来构建我们的前端应用程序。

如果您不了解这些技术，也不用担心，我将会在您阅读的过程中为您介绍基础知识。

（本文内容参考：java567.com）

先决条件

您的计算机上应该有以下内容以便跟着做：

• Nodejs v18+
• 一个代码编辑器
• 一个网页浏览器

让我们创建我们的React应用程序。

React应用程序设置

要创建您的React应用程序，请转到您的终端，并使用命令提示符。打开您的命令提示符，并选择您喜欢创建React项目的位置。让我们选择桌面。

cd Desktop

上述命令将导航到您的桌面。

npm create vite@latest pokemon-app -- --template react

npm create vite@latest 将开始使用Vite构建一个新项目。但是，我们附加了我们项目的名称（pokemon-app）以及我们应用程序将使用的技术或框架（-- -- template react）。

您可以设置另一个模板，如svelte、vanilla或vue，项目将使用该框架创建。在其官方网站上阅读更多关于Vite的信息。

安装Vite之后，运行以下命令：

cd pokemon-app
npm install
npm run dev

我们将使用上述命令完成React设置。

运行第一个命令cd pokemon-app，以导航到pokeman-app文件夹。

运行code .来在您的代码编辑器中打开该文件夹。

如果弹出对话框要求信任文件的作者，请标记信任作者复选框。

打开您的代码编辑器终端。如果您在Windows上运行VSCode，则快捷键是`Ctrl + ``。

在终端中依次运行其他2个命令。

npm install
npm run dev

您的项目现在应该在浏览器中运行。

我们将使用GraphQL和Apollo来管理我们的数据获取。

如何使用GraphQL和Apollo

GraphQL是一种用于API的查询语言，也是用于使用现有数据执行查询的运行时。它允许您在应用程序中仅请求所需的数据，而不多余，从而使其非常高效和灵活。

Apollo是一个状态管理库，允许您使用GraphQL管理本地和远程数据。它可用于获取、缓存和修改应用程序数据，同时自动更新您的UI。

让我们安装您需要的包。

安装包

在您的终端中运行以下命令以安装Apollo客户端。

npm install @apollo/client

导航到您的main.jsx文件并导入以下内容：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import {
  ApolloProvider,
  ApolloClient,
  InMemoryCache,
} from "@apollo/client";
import "./index.css";

您已经导入了React和ReactDOM用于DOM操作。

ApolloClient负责管理您应用程序的数据获取和状态管理。它负责将GraphQL查询和变异发送到GraphQL服务器并缓存结果。

ApolloProvider将用于包装您的React应用程序，以向所有组件提供Apollo客户端实例，以便您的应用程序可以通过Apollo客户端访问获取的数据。

InMemoryCache是一个缓存实现，用于将GraphQL查询的结果存储在内存中，以便高效地访问和检索。

您还导入了index.css来为您的应用程序设置样式。

如何创建Apollo客户端

const client = new ApolloClient({
  uri: "https://graphql-pokemon2.vercel.app/",
  cache: new InMemoryCache(),
});

以上代码使用了一些配置创建了ApolloClient的新实例：

1. uri：这指定了您的GraphQL API端点的URL。这是您的Apollo客户端将发送GraphQL查询和变异的端点。
2. cache：这配置了Apollo客户端的缓存实现，以使用内存缓存访问数据并存储GraphQL查询的结果，减少了从服务器重新获取数据的需要。

现在您可以将您的组件与ApolloProvider一起包装：

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>
);

请注意，client属性也被传递以提供您的应用程序ApolloClient的配置。

转到您的App.jsx组件并输入以下内容：

import React from "react";
import { PokemonsContainer } from "./components/PokemonsContainer";

export default function App() {
  return (
    <main>
      <PokemonsContainer />
    </main>
  );
}

您导入了React和将要创建的PokemonsContainer。PokemonsContainer组件被包装在main标签中，并将在组件粘贴到DOM中时呈现。

让我们在位于components文件夹中的文件中创建PokemonsContainer组件。即：