10、React中GraphQL与Apollo Client的高级应用

最新推荐文章于 2025-11-01 09:24:09 发布

zero1

最新推荐文章于 2025-11-01 09:24:09 发布

阅读量16

点赞数

CC 4.0 BY-SA版权

分类专栏： GraphQL实战：从零到全栈文章标签： React GraphQL Apollo Client

本文链接：https://blog.youkuaiyun.com/zero1/article/details/154555218

GraphQL实战：从零到全栈专栏收录该内容

19 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

React中GraphQL与Apollo Client的高级应用

1. GraphQL查询/变异与高阶组件

在React中，我们可以使用React Apollo的Query和Mutation组件将数据层（Apollo Client）与视图层（React）连接起来。Query组件在渲染时执行查询，而Mutation组件提供一个触发变异的函数。这两个组件都使用渲染属性模式，使结果在其子函数中可访问。

高阶组件（HOC）是React渲染属性模式的一种广泛接受的替代方案。React Apollo包也为查询和变异实现了高阶组件，尽管Apollo团队并不大力推广它，甚至更倾向于渲染属性作为首选。

以下是使用高阶组件的示例：

// src/Profile/index.js
import React from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';

const GET_REPOSITORIES_OF_CURRENT_USER = gql`
{
  viewer {
    ...
  }
}
`;

const Profile = ({ data, loading, error }) => {
  if (error) {
    return <ErrorMessage error={error} />;
  }
  const { viewer } = data;
  if (loading || !viewer) {
    return <Loading />