前端 GraphQL 客户端：高效获取数据的最佳实践

推荐方案

Apollo Client

// 正确的做法：使用 Apollo Client
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

// 创建 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
      }
    }
  }
`;

// 定义变更
const CREATE_POST = gql`
  mutation CreatePost($input: PostInput!) {
    createPost(input: $input) {
      id
      title
      content
      createdAt
    }
  }
`;

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

function UserProfile({ userId }) {
  // 使用 useQuery 钩子获取数据
  const { loading, error, data, refetch } = useQuery(GET_USER_WITH_POSTS, {
    variables: { id: userId },
    // 缓存策略
    fetchPolicy: 'cache-and-network'
  });

  // 使用 useMutation 钩子执行变更
  const [createPost, { loading: creating }] = useMutation(CREATE_POST, {
    // 变更后更新缓存
    update(cache, { data: { createPost } }) {
      const { user } = cache.readQuery({
        query: GET_USER_WITH_POSTS,
        variables: { id: userId }
      });
      cache.writeQuery({
        query: GET_USER_WITH_POSTS,
        variables: { id: userId },
        data: {
          user: {
            ...user,
            posts: [...user.posts, createPost]
          }
        }
      });
    }
  });

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

  const handleCreatePost = async (title, content) => {
    await createPost({ variables: { input: { title, content, userId } } });
  };

  return (
    <div>
      <h2>{data.user.name}</h2>
      <p>{data.user.email}</p>
      <h3>帖子</h3>
      <ul>
        {data.user.posts.map(post => (
          <li key={post.id}>
            <h4>{post.title}</h4>
            <p>{post.content}</p>
            <p>{post.createdAt}</p>
          </li>
        ))}
      </ul>
      <button onClick={() => refetch()}>刷新</button>
      <button onClick={() => handleCreatePost('新帖子', '帖子内容')} disabled={creating}>
        {creating ? '创建中...' : '创建帖子'}
      </button>
    </div>
  );
}

URQL

// 正确的做法：使用 URQL
import { createClient, gql } from 'urql';

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

// 在 React 组件中使用
import React from 'react';
import { useQuery, useMutation } 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>
  );
}

Relay

// 正确的做法：使用 Relay
import { Environment, Network, RecordSource, Store, useLazyLoadQuery, graphql } from 'relay-runtime';

// 创建 Relay 环境
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 => 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
          }
        }
      }
    }
  }
`;

// 在 React 组件中使用
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>
  );
}

核心优势

专业工具不仅仅是发送请求，还包括缓存管理、错误处理、类型生成等功能。这些工具可以大大简化你的前端代码，提高开发效率。

所以，别再觉得 GraphQL 复杂了，使用专业的客户端工具，让数据获取变得更加优雅！

总结

• Apollo Client：功能强大，生态丰富，适合大型应用
• URQL：轻量级，API 简洁，适合中小型应用
• Relay：Facebook 开发，性能优异，适合大型应用
• 缓存管理：智能缓存，减少重复请求
• 类型安全：自动生成 TypeScript 类型
• 错误处理：统一的错误处理机制
• 变更管理：执行 GraphQL 变更并更新缓存
• 开发工具：GraphQL Playground、Apollo DevTools 等

前端 GraphQL 客户端，让数据获取变得更加优雅！