如何在 React 应用中设置 GraphQL

2020-09-23 08:00:00 · 飞浪

使用 Apollo Client 和 `useQuery` 将 GraphQL 集成到你的 React 应用程序中，以从 graphQL 和 REST 端点检索数据。

介绍

GraphQL 是一种查询语言，用于通过单个请求从多个资源中准确查询所需内容。它旨在提高 Web 应用等客户端的性能，并使其更轻松地处理后端数据。

本指南将演示如何使用Apollo Client将 GraphQL 集成到您的 React 应用中。您将使用配置 Apollo Client，然后使用useQuery从 graphQL 和 REST 端点检索数据。本指南假设您对 React Hooks 有基本的了解。

开始一个新的 React 项目

首先通过运行以下命令创建一个新的 React 项目：

      npx create-react-app my-graphql-react-project
cd my-graphql-react-project
yarn add @apollo/client graphql
    

这些命令设置了一个新的 React 项目并安装@apollo/client，这是一个稳定且成熟的 graphQL 库。Apollo 有助于管理应用程序中的状态和内存缓存。与 React Redux 项目相比，这可以让您用更少的代码实现更多功能。

设置 Apollo 客户端

要开始使用ApolloClient查询 React 应用中 graphQL 端点，您必须设置一个客户端并使其可供相关组件使用。

创建文件src/ApolloClient/client.js并插入以下代码。

      import { ApolloClient, ApolloLink, InMemoryCache } from "@apollo/client";
import { RestLink } from "apollo-link-rest";

const httpLink = new HttpLink({
  uri: "https://48p1r2roz4.sse.codesandbox.io",
});

export const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: ApolloLink.from([httpLink]),
});
    

需要两部分配置：

link允许您自定义从 graphQL 查询和突变到后端和应用内状态管理的数据流。这可以包括：添加自定义标头并路由到 REST 端点和 graphQL 端点。
当您已经拥有数据时，缓存可以让您避免不必要的网络请求。

上面的代码示例连接到一个提供货币汇率数据的简单沙盒 graphQL 端点。

使 ApolloClient 可用于应用程序的其余部分

使用客户端配置，您可以使用 React 的 Context API，以便您的子组件可以访问您的配置并进行查询和变更。为此，请将您的src/App.js更新为以下内容：

      import React from "react";
import "./App.css";
import { client } from "./ApolloClient/client";
import { ApolloProvider } from '@apollo/client';
import ExchangeRatesPage from './ExchangeRatesPage';

function App() {
  return (
    <ApolloProvider client={client}>
      <div className="App">
        <ExchangeRatesPage />
      </div>
    </ApolloProvider>
  );
}

export default App;
    

您已导入先前创建的客户端，并使用ApolloProvider组件包装所有内容。这些更改是必要的，以便您将在下一节中创建的ExchangeRatesPage组件知道如何获取数据。

从组件进行 GraphQL 查询

在ApolloClient上下文中，App.js的子组件可以使用useQuery和useLazyQuery钩子来查询数据。

本节介绍如何使用useQuery钩子。创建文件src/ExchangeRatePage.js

      import React from "react";
import { useQuery, gql } from "@apollo/client";

const EXCHANGE_RATES = gql`
  query GetExchangeRates {
    rates(currency: "AUD") {
      currency
      rate
    }
  }
`;

function ExchangeRatePage() {
  const { data, loading, error } = useQuery(EXCHANGE_RATES);

  if (loading) {
    return <div>loading</div>;
  }

  if (error) {
    return <div>{error}</div>;
  }

  return data.rates.map(({ currency, rate }) => (
    <div key={currency}>
      <p>
        {currency}: {rate}
      </p>
    </div>
  ));
}

export default ExchangeRatePage;
    

当此组件加载时，它会立即向服务器发出查询，并将loading属性设置为true。一旦返回数据，您的组件将立即重新呈现，并填充data属性。您应该注意到，开始查询数据的样板代码少了很多。加载和错误状态属性已为您处理。如果您希望更好地控制加载，可以使用useLazyQuery钩子并在想要触发获取操作时调用返回函数。

使用 GraphQL 查询 REST 资源

如果您有一组 REST 端点，您仍然可以使用 Apollo 和 GraphQL 来查询这些数据。为此，您需要安装apollo-rest-link。运行以下命令安装所需的软件包。

      yarn add graphql-anywhere apollo-link-rest

然后将src/ApolloClient/client.js文件更新为以下内容：

      import { ApolloClient, ApolloLink, InMemoryCache } from "@apollo/client";
import { RestLink } from "apollo-link-rest";
import { HttpLink } from "apollo-link-http";

const restLink = new RestLink({
  endpoints: {
    openExchangeRate: "https://open.exchangerate-api.com/v6/",
  },
});

const httpLink = new HttpLink({
  uri: "https://48p1r2roz4.sse.codesandbox.io",
});

export const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: ApolloLink.from([restLink, httpLink]),
});
    

您现在已经配置了两个ApolloLinks：

HttpLink处理对 graphQL 端点的请求
RestLink处理对一个或多个 REST 端点的请求

要激活RestLink，您可以使用@rest graphQL 指令。将您的EXCHANAGE_RATES查询更新为以下内容：

      onst EXCHANGE_RATES = gql`
  query GetExchangeRates {
    rates(currency: "AUD") {
      currency
      rate
    }
    openExchangeRates @rest(type: "openExchangeRates", path: "/latest", endpoint: "openExchangeRate") {
      rates
    }
  }
`;
    

Apollo Client 将使用您的 graphQL 端点向您的 REST 端点发出请求。您的 rest 端点的 URI 将通过组合@rest指令中指定的路径和client.js中配置的端点来构建。在本例中，URI 将解析为 https://open.exchangerate-api.com/v6/latest。您的 REST 请求的结果将附加到useQuery钩子返回的数据属性中。如果您的请求成功，数据属性的结构将如下所示：

      {
  "rates": [ { "currency": "AED", "rate": "2.67777" } ],
  "openExchangeRate": {
    "rates": { "ARS": 75.17 }
  }
}
    

从根本上讲，来自 graphQL 端点的费率与来自 REST 端点的openExchangeRate属性相结合。

从客户端的角度来看，这很方便，因为您可以从 Apollo 的缓存和状态管理中受益，而无需将后端完全重写为 GraphQL。

结论

与远程数据交互是现代 Web 应用的重要组成部分。使用 Apollo 和 GraphQL，从 REST 和 GraphQL 端点查询数据变得更加容易。下一步，您可能想要探索其他 Apollo 功能，例如突变和订阅。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

如何在 React 应用中设置 GraphQL

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import { ApolloClient, ApolloLink, InMemoryCache } from "@apollo/client"; import { RestLink } from "apollo-link-rest"; const httpLink = new HttpLink({ uri: "https://48p1r2roz4.sse.codesandbox.io", }); export const client = new ApolloClient({ cache: new InMemoryCache(), link: ApolloLink.from([httpLink]), });

import React from "react"; import "./App.css"; import { client } from "./ApolloClient/client"; import { ApolloProvider } from '@apollo/client'; import ExchangeRatesPage from './ExchangeRatesPage'; function App() { return ( <ApolloProvider client={client}> <div className="App"> <ExchangeRatesPage /> </div> </ApolloProvider> ); } export default App;

import React from "react"; import { useQuery, gql } from "@apollo/client"; const EXCHANGE_RATES = gql` query GetExchangeRates { rates(currency: "AUD") { currency rate } } `; function ExchangeRatePage() { const { data, loading, error } = useQuery(EXCHANGE_RATES); if (loading) { return <div>loading</div>; } if (error) { return <div>{error}</div>; } return data.rates.map(({ currency, rate }) => ( <div key={currency}> <p> {currency}: {rate} </p> </div> )); } export default ExchangeRatePage;

import { ApolloClient, ApolloLink, InMemoryCache } from "@apollo/client"; import { RestLink } from "apollo-link-rest"; import { HttpLink } from "apollo-link-http"; const restLink = new RestLink({ endpoints: { openExchangeRate: "https://open.exchangerate-api.com/v6/", }, }); const httpLink = new HttpLink({ uri: "https://48p1r2roz4.sse.codesandbox.io", }); export const client = new ApolloClient({ cache: new InMemoryCache(), link: ApolloLink.from([restLink, httpLink]), });

onst EXCHANGE_RATES = gql` query GetExchangeRates { rates(currency: "AUD") { currency rate } openExchangeRates @rest(type: "openExchangeRates", path: "/latest", endpoint: "openExchangeRate") { rates } } `;