翻译 | 《JavaScript Everywhere》第14章使用Apollo Client

最新推荐文章于 2022-08-14 21:09:29 发布

VIP文章前端毛小悠

最新推荐文章于 2022-08-14 21:09:29 发布

阅读量474

点赞数

分类专栏： javascript everywhere 文章标签： javascript css

本文链接：https://blog.csdn.net/code_maomao/article/details/110217957

版权

翻译 | 《JavaScript Everywhere》第14章使用Apollo Client

写在最前面

大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。

为了提高大家的阅读体验，对语句的结构和内容略有调整。如果发现本文中有存在瑕疵的地方，或者你有任何意见或者建议，可以在评论区留言，或者加我的微信：code_maomao，欢迎相互沟通交流学习。

(σﾟ∀ﾟ)σ…:*☆哎哟不错哦

第14章使用Apollo Client

我清楚地记得我的第一个互联网连接。我用计算机的调制解调器拨号上网，然后我可以免费上网。当时感觉如此神奇，与我们今天使用的始终在线的连接相距甚远。
流程如下所示：

坐在我的电脑上，然后打开ISP软件。
单击“连接”，然后等待调制解调器拨打该号码。
如果连接成功，请听到“调制解调器声音”。
如果不是这样，例如在高峰时段，此时线路可能会过载和繁忙，请重试。
建立连接后，你将收到成功通知，并浏览所有充满GIF的90年代辉煌的网页。

这个周期看起来很艰巨，但是它仍然代表了服务彼此之间进行通信的方式：它们请求一个连接，建立该连接，发送一个请求，并得到一些回应。我们的客户应用程序将以相同的方式工作。我们将首先连接到服务器API应用程序，如果成功，将向该服务器发出请求。

在本章中，我们将使用Apollo Client连接到我们的API。连接之后，我们将编写一个GraphQL查询，该查询将用于在页面上显示数据。我们还将在API查询和接口组件中引入分页。

在本地运行API

Web客户端应用程序的开发将需要访问我们API的本地实例。如果你一直在阅读本书，那么你可能已经在计算机上启动了Notedly API及其数据库。如果不是这样，我已经在附录A添加了有关如何获取API并使用一些样本数据一起运行的副本。如果你已经在运行API，但是希望使用其他数据，请从API项目目录的根目录运行npm run seed。

设置Apollo客户端

与Apollo服务器非常相似，Apollo客户端提供了许多有用的功能来简化在JavaScript UI应用程序中使用GraphQL的工作。Apollo客户端提供了用于将Web客户端连接到API、本地缓存、GraphQL语法、本地状态管理等的库。我们还将在React应用程序中使用Apollo Client，但Apollo还提供了Vue，Angular，Meteor，Ember和Web Components的库。

首先，我们要确保.env文件包含了对我们本地API URI的引用，这将使我们能够在开发中使用本地API实例，同时在将应用程序发布到公共Web服务器时指向我们的产品API。在我们的.env文件，我们应该有一个API_URI变量保存我们本地API服务器的地址：

API_URI=http://localhost:4000/api

我们的代码捆绑程序Parcel设置为自动处理.env文件。

任何时候我们想在我们的代码中引用一个.env变量，我们可以使用process.env.VARIABLE_NAME。这将使我们能够在本地开发、生产以及我们可能需要的任何其他环境（例如暂存或持续集成）中使用特有的变量值。

使用存储在环境变量中的地址，我们可以将Web客户端连接到API服务器。在src/App.js文件中工作，首先，我们需要导入将要使用的Apollo软件包：

// import Apollo Client libraries
import {
    ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';

导入这些内容后，我们可以配置一个新的Apollo Client实例，将其传递给API URI，启动缓存，并启用本地Apollo开发者工具：

// configure our API URI & cache
const uri = process.env.API_URI;
const cache = new InMemoryCache();

// configure Apollo Client
const client = new ApolloClient({
   
  uri,
  cache,
  connectToDevTools: true
});

最后，我们可以将React应用程序打包到一个ApolloProvider。我们将用替换空标签，并将我们的客户端包括在内：

const App = () => {
   
  return (
   <ApolloProvider client={
   client}>
    <GlobalStyle />
    <Pages />
   </ApolloProvider>
  );
};

总体而言，我们的src/App.js文件现在将如下所示：

import React from 'react';
import ReactDOM from 'react-dom';

// import Apollo Client libraries
import {
    ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';

// global styles
import GlobalStyle from '/components/GlobalStyle';
// import our routes
import Pages from '/pages';

// configure our API URI & cache
const uri = process.env.API_URI;
const cache = new InMemoryCache();

// configure Apollo Client
const client = new ApolloClient({
   
  uri,
  cache,
  connectToDevTools: true
});

const App = () => (
  <ApolloProvider client={
   client}>
   <GlobalStyle />
   <Pages />
  </ApolloProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

通过将客户端连接到API服务器，我们现在可以将GraphQL查询和修改集成到我们的应用程序中。

查询API

当我们查询API时，我们是在请求数据。在UI客户端中，我们希望能够查询该数据并将其显示给用户。Apollo使我们能够编写查询以获取数据。然后，我们可以更新React组件以将数据显示给最终用户。我们可以通过编写noteFeed查询来探索查询的用法，该查询将向用户返回最新笔记的摘要，并将其显示在应用程序的主页上。

当我第一次编写查询时，发现以下过程很有用：

考虑查询需要返回什么数据。
在GraphQL Playground中编写查询。
将查询集成到客户端应用程序。

让我们在构思查询时遵循此过程。如果你继续阅读本书的API部分，你可能会记得，noteFeed查询返回一个包含10个笔记的列表，以及一个游标（指示最后返回的笔记的位置）和hasNextPage布尔值，该布尔值允许我们确定是否有其他笔记要加载。我们可以在GraphQL Playground中查看我们的结构，从而可以查看所有可用的数据选项。对于我们的查询，我们很可能需要以下信息：

{
   
  cursor
  hasNextPage
  notes {
   
   id
   createdAt
   content
   favoriteCount
   author {
   
    id
    username
    avatar
    }
   }
  }

现在，在我们的GraphQLPlayground中，我们可以将其填充到GraphQL查询中。我们将比服务器章节中的查询更加详细，通过命名查询并提供一个可选的名为cursor的变量，要使用GraphQL Playground，请首先确保API服务器正在运行，然后访问http://localhost:4000/api。在GraphQL Playground中，添加以下查询：

query noteFeed($cursor: String) {
   
   noteFeed(cursor: $cursor) {
   
    cursor
    hasNextPage
    notes {
   
     id
     createdAt
     content
     favoriteCount
     author {
   
      username
      id
      avatar
     }
    }
   }
  }

在GraphQL Playground中，添加一个“query variable”以测试该变量的使用：

{
   
  "cursor": ""
}

要测试此变量，请将空字符串替换为数据库中任何笔记的ID值（图14-1）。

图14-1我们在GraphQL Playground中的noteFeed查询

现在我们知道查询已正确编写，我们可以放心

最低0.47元/天解锁文章

前端毛小悠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
翻译 | 《JavaScript Everywhere》第14章使用Apollo Client

翻译 | 《JavaScript Everywhere》第14章使用Apollo Client（_）写在最前面大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。为了提高大家的阅读体验，对语句的结构和内容略有调整。如果发现本文中有存在瑕疵的地方，或者你有任何意见或者建议，可以在评论区留言，或者加我的微信：code_maomao，欢迎相互沟通交流学习。(σﾟ∀ﾟ)σ…:*☆哎哟不错哦第14章使用Apollo Client我清楚地记得我的第一个互联网连接。我用计算机的调制解调器
复制链接

扫一扫