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查詢中的錯誤和加載狀態，并根據實際需求展示相應的提示信息。