温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2024-05-11 10:53:15 来源:亿速云 阅读:93 作者:小樊 栏目:软件技术

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

  1. 使用useQuery钩子来发起GraphQL查询并处理加载状态和错误信息。useQuery钩子会返回一个包含loadingerrordata等属性的对象,可以根据这些属性来展示加载状态或错误信息。
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>
  );
};
  1. 使用useMutation钩子来发起GraphQL变更操作并处理错误信息。与useQuery类似,useMutation也会返回一个包含loadingerrordata等属性的对象。
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>;
};
  1. 使用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查询中的错误和加载状态,并根据实际需求展示相应的提示信息。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI