GraphQL 在 React 项目中的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种查询语言，它可以用来查询并获取服务器端的数据。GraphQL 具有高度的灵活性，可以按需获取所需数据，并减少网络传输量。GraphQL 的逐渐流行，也使得它逐渐成为了前端开发中的趋势。

在 React 项目中，GraphQL 可以与现有的 Redux 或 MobX 等状态管理工具配合使用，可以极大地提高 Web 应用程序的快速开发和性能。本文将讨论 GraphQL 在 React 项目中的最佳实践，详述使用 GraphQL 的过程中需要注意的一些问题和技巧。

安装

要在 React 项目中使用 GraphQL，需要使用一个客户端库来实现。目前，最常用的 GraphQL 客户端库包括 Apollo Client 和 Relay。这两个库最常用的安装方式是通过 NPM 包来获取。

要安装 Apollo Client，只需要在终端中运行以下命令：

npm install --save apollo-boost react-apollo graphql

同样地，要安装 Relay，只需要在终端中运行以下命令：

npm install --save react-relay relay-runtime graphql

Apollo Client 的使用

如果您选择了 Apollo Client，那么首先需要使用 "Apollo Boost" 来设置和初始化 Apollo Client。

import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'https://my.api.com/graphql',
});

上面的代码将创建一个新的 Apollo Client 实例，该实例使用指定的 GraphQL API 作为其 URI。现在，您可以使用该客户端来执行查询和变更。

// www.javascriptcn.com code example
import { Query } from 'react-apollo';
import gql from 'graphql-tag';

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

<Query query={EXCHANGE_RATES}>
  {({ loading, error, data }) => {
    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error :(</p>;

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

上面的代码使用 Apollo Client 发送了一个查询，该查询将返回所有当前美元兑换其他货币的汇率。查询结果显示在一个包含货币和汇率的列表中。

Relay 的使用

如果您选择了 Relay，则需要编写一个包含 GraphQL 查询和组件渲染逻辑的容器组件。

// www.javascriptcn.com code example
import { createFragmentContainer, graphql } from 'react-relay';

class ItemComponent extends React.Component {
  render() {
    return <div>{this.props.item.name}: {this.props.item.description}</div>;
  }
}

const ItemContainer = createFragmentContainer(ItemComponent, {
  item: graphql`
    fragment ItemContainer_item on Item {
      name
      description
    }
  `,
});

上面的代码定义了一个带有名称和描述的项目组件。然后我们使用 createFragmentContainer 创建一个 Item 的容器组件，并在 GraphQL 查询中定义了需要渲染 Item 组件的信息。

// www.javascriptcn.com code example
import { QueryRenderer, graphql } from 'react-relay';
import environment from './RelayEnvironment';

const ItemQuery = graphql`
  query ItemQuery($itemId: String!) {
    item(id: $itemId) {
      ...ItemContainer_item
    }
  }
`;

const itemId = '12345';

<QueryRenderer
  environment={environment}
  query={ItemQuery}
  variables={{ itemId }}
  render={({ error, props }) => {
    if (error) {
      return <div>{error}</div>;
    } else if (props) {
      return <ItemContainer item={props.item} />;
    } else {
      return <div>Loading...</div>;
    }
  }}
/>

上面的代码使用 QueryRenderer 组件发送了一个 GraphQL 查询，查询了 ID 为 12345 的项目的详细信息，并使用 ItemContainer 组件渲染了查询结果。

结语

这篇文章提供了一些使用 GraphQL 查询远程服务器数据的 React 最佳实践，其中包括使用 Apollo Client 和 Relay 这两个客户端库的示例。GraphQL 可以帮助您提高 Web 应用程序的性能，并在减少数据传输的同时增强数据的灵活性。

但是，在使用 GraphQL 的过程中需要注意一些技巧和问题，包括如何使用分页数据和前缀查询，并在整个应用程序中使用单一的 GraphQL 客户端实例。这些细节和更多信息都可以在 GraphQL 官方文档中找到。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d6ca7da941bf7134caa4f2

GraphQL 在 React 项目中的最佳实践

安装

Apollo Client 的使用

Relay 的使用

结语

接着读