React应用兼容GraphQL与REST API的客户端选型及实现咨询

1. 同时引入react-query与apollo-client：完全可行 #

• 核心逻辑：让两个库各司其职——react-query专注处理REST API请求，apollo-client专注处理GraphQL请求。
• 优势：各自发挥擅长的缓存策略：apollo-client针对GraphQL的schema做精细化缓存、自动数据更新；react-query对REST请求的缓存、失效、重试机制更灵活。
• 注意点：会增加前端bundle体积，同时团队需要维护两套请求管理逻辑，适合两种请求占比都很高且团队对两个库都熟悉的场景。

2. 仅用apollo-client处理REST与GraphQL请求：可行 #

Apollo Client提供了rest-link扩展，支持将REST请求纳入Apollo的查询生命周期，共享GraphQL的缓存、错误处理等能力。

实现步骤与示例 #

1. 安装依赖：

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

2. 配置ApolloClient并添加REST Link：

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

// GraphQL HTTP链接配置
const httpLink = createHttpLink({
  uri: '/graphql',
});

// REST链接配置
const restLink = new RestLink({
  uri: '/api/', // REST API基础路径
});

// 创建Client，将REST链接作为前置中间件
const client = new ApolloClient({
  link: restLink.concat(httpLink),
  cache: new InMemoryCache(),
});

// 根组件包裹ApolloProvider
function App() {
  return (
    <ApolloProvider client={client}>
      {/* 子组件 */}
    </ApolloProvider>
  );
}

3. 组件中调用REST与GraphQL请求：

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

// 查询REST接口：获取用户列表
const GET_USERS = gql`
  query GetUsers {
    users @rest(type: "User", path: "users") {
      id
      name
      email
    }
  }
`;

// 查询GraphQL接口：获取文章详情
const GET_POST = gql`
  query GetPost($id: ID!) {
    post(id: $id) {
      id
      title
      content
    }
  }
`;

function UserList() {
  const { loading, error, data } = useQuery(GET_USERS);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  
  return (
    <ul>
      {data.users.map(user => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}

function PostDetail({ postId }) {
  const { loading, error, data } = useQuery(GET_POST, { variables: { id: postId } });
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  
  return (
    <div>
      <h2>{data.post.title}</h2>
      <p>{data.post.content}</p>
    </div>
  );
}

3. 仅用react-query处理REST与GraphQL请求：完全可行 #

react-query是基于异步请求的通用状态管理库，不绑定特定请求类型，只需将GraphQL请求封装为Promise即可。

实现步骤与示例 #

1. 安装依赖：

npm install react-query @tanstack/react-query

2. 配置QueryClientProvider：

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5分钟后数据变为stale
      retry: 2, // 失败重试2次
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 子组件 */}
    </QueryClientProvider>
  );
}

3. 组件中调用REST与GraphQL请求：

import { useQuery, useMutation } from '@tanstack/react-query';
import axios from 'axios';

// 处理REST请求：获取用户列表
const fetchUsers = async () => {
  const response = await axios.get('/api/users');
  return response.data;
};

function UserList() {
  const { isLoading, error, data } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
  });
  
  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  
  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}

// 处理GraphQL请求：获取文章详情
const fetchPost = async ({ queryKey }) => {
  const [_, postId] = queryKey;
  const response = await axios.post('/graphql', {
    query: `
      query GetPost($id: ID!) {
        post(id: $id) {
          id
          title
          content
        }
      }
    `,
    variables: { id: postId },
  });
  return response.data.data.post;
};

function PostDetail({ postId }) {
  const { isLoading, error, data } = useQuery({
    queryKey: ['post', postId],
    queryFn: fetchPost,
  });
  
  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  
  return (
    <div>
      <h2>{data.title}</h2>
      <p>{data.content}</p>
    </div>
  );
}

// GraphQL mutation示例：创建文章
const createPost = async (postData) => {
  const response = await axios.post('/graphql', {
    query: `
      mutation CreatePost($title: String!, $content: String!) {
        createPost(title: $title, content: $content) {
          id
          title
        }
      }
    `,
    variables: postData,
  });
  return response.data.data.createPost;
};

function CreatePostForm() {
  const createPostMutation = useMutation({
    mutationFn: createPost,
    onSuccess: () => {
      // 成功后刷新相关查询
      queryClient.invalidateQueries({ queryKey: ['posts'] });
    },
  });
  
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    createPostMutation.mutate({
      title: formData.get('title'),
      content: formData.get('content'),
    });
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input name="title" placeholder="标题" required />
      <textarea name="content" placeholder="内容" required />
      <button type="submit" disabled={createPostMutation.isLoading}>
        {createPostMutation.isLoading ? '提交中...' : '创建文章'}
      </button>
      {createPostMutation.error && <p>Error: {createPostMutation.error.message}</p>}
    </form>
  );
}

选型建议 #

• 优先单一库方案：除非两种请求场景差异极大，否则单一库能减少维护成本、降低bundle体积。
• 若GraphQL请求占比高：选apollo-client + rest-link，复用GraphQL的缓存和生态，学习成本集中在Apollo体系。
• 若REST请求占比高或偏好灵活的缓存策略：选react-query，它对REST的支持更原生，缓存、重试、失效机制更易定制。
• 双库方案仅适合过渡场景：比如后端正在从REST迁移到GraphQL，短期内需要同时维护两种请求，待迁移完成后再统一到单一库。

内容的提问来源于stack exchange，提问作者Mitar Ilic