在 React 中使用 React Apollo 和 Apollo Boost 的 GraphQL 简介

Apollo GraphQL 客户端是与客户端的 GraphQL API 接口的一个非常流行的方法. 在本文中,我们将讨论如何使用 Apollo Boost 和 React Apollo 2.1 在 React 应用程序中设置 Apollo。

这两个是为了什么,你问。

Apollo Boost:在客户端上设置Apollo通常需要大量的锅炉板代码,Apollo Boost修复了这一点。它是Apollo客户端,Apollo缓存记忆,Apollo链接错误,Apollo链接http和Apollo链接状态的组合,允许更容易的设置
React Apollo:A React-specific integration for Apollo。

<$>[注]本教程假设使用React Apollo 2.1+ <$>

安装

让我们先使用 npx和 Create React App初始化一个 React 项目:

1$ npx create-react-app hello-graphql

然后,您可以cd到项目中并启动本地开发服务器:

1$ cd hello-graphql && yarn start

在我们的项目中,我们还需要一些额外的包,即 graphql、 graphql-tag、apollo-boost 和 react-apollo。

1$ yarn add graphql graphql-tag apollo-boost react-apollo
2
3# or, using npm:
4$ npm i graphql graphql-tag apollo-boost react-apollo

有了我们的项目和附加的包,我们现在可以设置阿波罗客户端。

设置

我们将启动一个客户端并将其 URI 交给我们的 GraphQL 服务器终端,然后使用 ApolloProvider 组件在我们的应用程序组件中提供该客户端。

对于这个例子,我们的终端点将指向包含关于星球大战的数据的 Apollo Launchpad实例:

 1[label index.js]
 2import React from 'react';
 3import ReactDOM from 'react-dom';
 4
 5import { ApolloProvider } from 'react-apollo';
 6import { ApolloClient, HttpLink, InMemoryCache } from 'apollo-boost';
 7
 8import './index.css';
 9import App from './App';
10
11const client = new ApolloClient({
12  link: new HttpLink({ uri: 'https://mpjk0plp9.lp.gql.zone/graphql' }),
13  cache: new InMemoryCache()
14});
15
16const AppWithProvider = () => (
17  <ApolloProvider client={client}>
18    <App />
19  </ApolloProvider>
20);
21
22ReactDOM.render(<AppWithProvider />, document.getElementById('root'));

几个要注意的事情:

我们用 HttpLink 初始化客户端,指向我们的 GraphQL 终端,然后将 Apollo 的 InMemoryCache 指定为缓存工具. *我们使用ApolloProvider组件,将其传递给我们的客户端作为支持,然后将其围绕我们的App组件包裹

Query 组件示例

现在一切都已经完成了,我们可以开始对 GraphQL 端点运行查询,为此,我们将使用 React Apollo 的Query组件,该组件使用 render prop 模式将数据从查询中返回给我们。

以下是我们查询星球大战剧情英雄及其朋友的例子:

 1[label App.js]
 2import React from 'react';
 3import PropTypes from 'prop-types';
 4
 5import { Query } from 'react-apollo';
 6import gql from 'graphql-tag';
 7
 8const QUERY = gql`
 9  query HeroFriends($episode: Episode!) {
10    hero(episode: $episode) {
11      name
12      friends {
13        name
14      }
15    }
16  }
17`;
18
19const HeroAndFriends = ({ episode }) => (
20  <Query query={QUERY} variables={{ episode }}>
21    {({ data, error, loading }) => {
22      if (error) return '💩 Oops!';
23      if (loading) return 'Patience young grasshopper...';
24
25      return (
26        <React.Fragment>
27          <h1>Hero: {data.hero.name}</h1>
28          <h2>His/her friends:</h2>
29          <ul>
30            {data.hero.friends.map(friend => (
31              <li key={friend.name}>{friend.name}</li>
32            ))}
33          </ul>
34        </React.Fragment>
35      );
36    }}
37  </Query>
38);
39HeroAndFriends.propTypes = { episode: PropTypes.string };
40HeroAndFriends.defaultProps = { episode: 'NEWHOPE' };
41
42const App = () => <HeroAndFriends episode="EMPIRE" />;
43
44export default App;

让我们分解这里发生的重要事情:

React Apollo 的「Query」组件采用了使用 graphql 标签 gql 解析的 GraphQL 查询所需的查询代码。「Query」还采用了必要的儿童代码,这应该是一个函数。在这里我们还通过了变量代码来为我们的查询提供变量值 *「Query」也可以使用一些可选的代码,例如 pollInterval、fetchPolicy、 errorPolicy 和 delay *传给儿童代码的函数接收了一个具有少数有用的属性的对象。在这里,我们使用数据、错误和加载,但其他属性,如网络Status、refetch和 fetchMore也可用
属性

️ 在那里你有它! 一个简单的方法来开始使用 React 和 GraphQL 并开始运行查询. 在未来的一篇文章中,我们还将探索突变组件来运行 GraphQL 突变。