如何在React中使用Apollo Client直接调用REST API接口

完全理解你的需求——在暂不搭建GraphQL服务的过渡阶段，用Apollo Client直接调用REST API，既简化客户端数据逻辑，又利用Apollo的缓存能力提速，这个思路非常务实，而且Apollo Client本身就支持这种场景，不用额外折腾。

下面是具体的落地步骤：

1. 安装必要依赖 #

除了基础的@apollo/client和graphql，还需要安装REST链接工具包来处理REST请求：

npm install @apollo/client graphql @apollo/client/link/rest

2. 配置Apollo Client，接入REST链接 #

初始化Client的时候，把REST链接加入到链路中，同时指定你的REST API基础地址：

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import { RestLink } from '@apollo/client/link/rest';

// 创建REST链接实例
const restLink = new RestLink({
  uri: 'https://your-rest-api-domain.com/', // 替换成你的API基础URL
});

// 初始化Apollo Client
const client = new ApolloClient({
  link: restLink,
  cache: new InMemoryCache(),
});

3. 用@rest指令编写查询 #

接下来就可以用GraphQL的查询语法，配合@rest指令来调用REST接口了，Apollo会自动帮你处理请求发送和结果缓存：

import { gql, useQuery } from '@apollo/client';

// 对应REST GET /users接口，定义返回数据结构
const GET_USERS = gql`
  query GetUsers {
    users @rest(type: "User", path: "/users") {
      id
      name
      email
    }
  }
`;

// 在组件中使用查询
function UserList() {
  const { loading, error, data } = useQuery(GET_USERS);

  if (loading) return <p>加载中...</p>;
  if (error) return <p>出错了：{error.message}</p>;

  return (
    <ul>
      {data.users.map(user => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}

4. 处理POST/PUT等非GET请求 #

对于创建、更新类的操作，用useMutation配合@rest指令，指定请求方法即可：

import { gql, useMutation } from '@apollo/client';

// 对应REST POST /users接口，提交创建用户的参数
const CREATE_USER = gql`
  mutation CreateUser($input: UserInput!) {
    user(input: $input) @rest(type: "User", path: "/users", method: "POST") {
      id
      name
      email
    }
  }
`;

function CreateUserForm() {
  const [createUser] = useMutation(CREATE_USER);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    await createUser({
      variables: {
        input: {
          name: formData.get('name'),
          email: formData.get('email'),
        },
      },
    });
    // 提交后的逻辑：比如刷新用户列表
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="姓名" required />
      <input name="email" type="email" placeholder="邮箱" required />
      <button type="submit">创建用户</button>
    </form>
  );
}

5. 最大化利用Apollo缓存优势 #

Apollo会自动把REST请求的结果存入缓存，后续相同查询直接读缓存，不用重复发请求。你还可以通过type字段定义缓存类型，方便后续做缓存更新、单个资源查询：

// 查询单个用户，如果之前已经获取过列表，会直接命中缓存
const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) @rest(type: "User", path: "/users/{args.id}") {
      id
      name
      email
    }
  }
`;

这种方案完全适配你的过渡需求：既不用立刻搭建GraphQL服务，又能让客户端用统一的GraphQL方式管理数据，同时享受到Apollo的缓存、错误处理、数据同步能力。后续如果要切换到完整的GraphQL服务，只需要把restLink换成GraphQL的httpLink，调整查询语句即可，组件逻辑几乎不用改动。

内容的提问来源于stack exchange，提问作者Yuriy Rypka