11、客户端 GraphQL 与 React 和 Apollo Client 实战

客户端 GraphQL 与 React 和 Apollo Client 实战

在现代的前端开发中，GraphQL 已经成为了一种非常流行的数据查询语言，而 Apollo Client 则是一个强大的数据管理库，它可以帮助我们在 React 应用中更好地管理和操作 GraphQL 数据。本文将深入探讨如何在 React 应用中使用 Apollo Client 进行客户端 GraphQL 开发，包括 GraphQL 变量、片段、缓存、突变以及客户端状态管理等方面的内容。

1. GraphQL 变量

GraphQL 变量允许我们在 GraphQL 操作中传递动态参数。以下是一个使用 GraphQL 变量的示例，用于搜索与用户选择的类别匹配的企业：

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

const GET_BUSINESSES_QUERY = gql`
query BusinessesByCategory($selectedCategory: String!) {
  businesses(
    where: { categories_SOME: { name_CONTAINS: $selectedCategory } }
  ) {
    businessId
    name
    address
    categories {
      name
    }
  }