前端使用 GraphQL 客户端的实战选择

Apollo 的好处是完整，坏处也是完整。项目刚起步时它看起来有点笨重，但如果页面里到处都有读写数据，后面通常还是会回到这种'统一管理'的路子。

URQL：轻一些，适合不想背太多概念的项目

URQL 的手感更干净，API 也更薄。很多团队选它，图的就是少一些框架味，多一些可控性。

import { createClient, gql } from 'urql';

const client = createClient({
  url: 'https://api.example.com/graphql',
  fetchOptions: () => ({
    headers: {
      authorization: localStorage.getItem('token') || ''
    }
  })
});

import React from 'react';
import { useQuery } from 'urql';

function UserList() {
  const [result, reexecuteQuery] = useQuery({
    query: gql`
      query GetUsers {
        users {
          id
          name
          email
        }
      }
    `
  });

  const { data, fetching, error } = result;

  if (fetching) return <div>加载中...</div>;
  if (error) return <div>错误：{error.message}</div>;

  return (
    <div>
      <h2>用户列表</h2>
      <ul>
        {data.users.map(user => (
          <li key={user.id}>
            {user.name} - {user.email}
          </li>
        ))}
      </ul>
      <button onClick={() => reexecuteQuery()}>刷新</button>
    </div>
  );
}

如果你不需要 Apollo 那套完整缓存体系，URQL 往往更顺手。它不是功能少，而是把边界收得更紧。

Relay：适合大项目，但上手门槛最高

Relay 的思路更强约束，尤其适合数据结构复杂、组件拆得很细的应用。它对查询组织、数据归一化和分页的要求都更严格，代价是学习成本明显更高。

import { Environment, Network, RecordSource, Store, useLazyLoadQuery, graphql } from 'relay-runtime';

function fetchQuery(operation, variables) {
  return fetch('https://api.example.com/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      authorization: localStorage.getItem('token') || ''
    },
    body: JSON.stringify({
      query: operation.text,
      variables,
    }),
  }).then(response => {
    return response.json();
  });
}

const environment = new Environment({
  network: Network.create(fetchQuery),
  store: new Store(new RecordSource()),
});

const UserQuery = graphql`
  query UserQuery($id: ID!) {
    user(id: $id) {
      id
      name
      email
      posts {
        edges {
          node {
            id
            title
            content
          }
        }
      }
    }
  }
`;

function UserDetail({ userId }) {
  const data = useLazyLoadQuery(
    UserQuery,
    { id: userId }
  );

  return (
    <div>
      <h2>{data.user.name}</h2>
      <p>{data.user.email}</p>
      <h3>帖子</h3>
      <ul>
        {data.user.posts.edges.map(edge => (
          <li key={edge.node.id}>
            <h4>{edge.node.title}</h4>
            <p>{edge.node.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

Relay 不是那种'顺手就用'的工具，但一旦项目规模起来，它的约束会省掉不少后续整理的麻烦。

怎么选

我一般会这么看：

• Apollo Client：要功能全，或者团队已经熟它
• URQL：想要轻量一点，别把客户端层做得太厚
• Relay：项目复杂、数据关系重、能接受较高学习成本

如果只是演示或者小页面，直接 fetch 也不是不行。只是到了真实项目里，缓存和更新这两件事，通常会比'发请求'本身更耗时间。GraphQL 客户端的价值就在这里。

结尾

GraphQL 前端客户端不是装饰品。它解决的是数据读写、缓存、类型、状态同步这些更麻烦的部分。选哪一个不重要，重要的是别把它当成一层可有可无的封装。