在React中处理GraphQL查询中的错误和加载状态可以通过使用Apollo Client提供的各种功能来实现。以下是一些处理GraphQL查询中错误和加载状态的常用方法:
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>
);
};
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>;
};
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查询中的错误和加载状态,并根据实际需求展示相应的提示信息。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。