您好,登錄后才能下訂單哦!
在React中處理GraphQL查詢中的錯誤和加載狀態(tài)可以通過使用Apollo Client提供的各種功能來實現(xiàn)。以下是一些處理GraphQL查詢中錯誤和加載狀態(tài)的常用方法:
useQuery
鉤子來發(fā)起GraphQL查詢并處理加載狀態(tài)和錯誤信息。useQuery
鉤子會返回一個包含loading
、error
和data
等屬性的對象,可以根據(jù)這些屬性來展示加載狀態(tài)或錯誤信息。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
鉤子來發(fā)起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
組件來為整個應(yīng)用程序提供Apollo Client實例,并在根組件中處理全局的加載狀態(tài)和錯誤信息。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查詢中的錯誤和加載狀態(tài),并根據(jù)實際需求展示相應(yīng)的提示信息。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。