前端 GraphQL 客户端实战：如何优雅地获取数据

这里不仅发起了两次请求，而且没有利用缓存，每次刷新都重新拉取数据，用户体验和性能都会受影响。

引入专业客户端库

方案一：Apollo Client

Apollo 是目前生态最丰富的选择，适合中大型应用。

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

// 创建实例
const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache(),
  headers: { authorization: localStorage.getItem('token') || '' },
});

// 定义查询
const GET_USER_WITH_POSTS = gql`
  query GetUserWithPosts($id: ID!) {
    user(id: $id) {
      id name email
      posts { id title content createdAt }
    }
  }
`;

// React 组件中使用
import React from 'react';
import { useQuery, useMutation } from '@apollo/client';

function UserProfile({ userId }) {
  const { loading, error, data, refetch } = useQuery(GET_USER_WITH_POSTS, {
    variables: { id: userId },
    fetchPolicy: 'cache-and-network', // 优先读缓存，后台更新
  });

  const [createPost] = useMutation(gql`
    mutation CreatePost($input: PostInput!) {
      createPost(input: $input) { id title content }
    }
  `);

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

  return (
    <div>
      <h2>{data.user.name}</h2>
      <ul>
        {data.user.posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
      <button onClick={() => refetch()}>刷新</button>
    </div>
  );
}

方案二：URQL

如果你追求轻量级和简洁的 API，URQL 是个不错的选择。

import { createClient, gql } from 'urql';

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

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}</li>)}
      </ul>
      <button onClick={() => reexecuteQuery()}>刷新</button>
    </div>
  );
}

方案三：Relay

Facebook 出品，性能优异，适合对性能有极致要求的大型应用。

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' },
    body: JSON.stringify({ query: operation.text, variables }),
  }).then(response => 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>
      <ul>
        {data.user.posts.edges.map(edge => (
          <li key={edge.node.id}>{edge.node.title}</li>
        ))}
      </ul>
    </div>
  );
}

核心总结

选择合适的客户端工具，能让 GraphQL 的开发体验提升一个档次。

• Apollo Client：功能全面，生态成熟，适合大多数场景。
• URQL：轻量灵活，API 友好，适合中小型项目。
• Relay：性能极致，规范严格，适合超大型应用。

记住，GraphQL 客户端不仅仅是发送 HTTP 请求，它还承担着缓存管理、错误处理、类型生成等关键职责。用好这些工具，你的前端代码会更整洁，维护成本也会更低。