React中如何处理GraphQL查询中的错误和加载状态

在React中处理GraphQL查询中的错误和加载状态可以通过使用Apollo Client提供的各种功能来实现。以下是一些处理GraphQL查询中错误和加载状态的常用方法：

1. 使用useQuery钩子来发起GraphQL查询并处理加载状态和错误信息。useQuery钩子会返回一个包含loading、error和data等属性的对象，可以根据这些属性来展示加载状态或错误信息。

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

const GET_DATA = gql`
  query GetData {
    data {
      id
      name
    }
  }
`;

const MyComponent = () => {
  const { loading, error, data } = useQuery(GET_DATA);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      {data.data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

2. 使用useMutation钩子来发起GraphQL变更操作并处理错误信息。与useQuery类似，useMutation也会返回一个包含loading、error和data等属性的对象。

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

const ADD_DATA = gql`
  mutation AddData($name: String!) {
    addData(name: $name) {
      id
      name
    }
  }
`;

const MyComponent = () => {
  const [addData, { loading, error }] = useMutation(ADD_DATA);

  const handleClick = async () => {
    try {
      await addData({ variables: { name: 'New Data' } });
    } catch (error) {
      console.error(error);
    }
  };

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <button onClick={handleClick}>Add Data</button>;
};

3. 使用ApolloProvider组件来为整个应用程序提供Apollo Client实例，并在根组件中处理全局的加载状态和错误信息。

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

const client = new ApolloClient({
  uri: 'https://graphql.example.com',
  cache: new InMemoryCache(),
});

const App = () => {
  return (
    <ApolloProvider client={client}>
      <MyComponent />
    </ApolloProvider>
  );
};

通过以上方法，可以很方便地处理GraphQL查询中的错误和加载状态，并根据实际需求展示相应的提示信息。