如何解决react-query with graphql-request:错误边界未运行
const queryClient = new QueryClient({
defaultOptions: {
useErrorBoundary: true,queries: {
suspense: true,useErrorBoundary: true,retry: 0,}
}
});
const useUsers = () => {
return useQuery("users",async () => {
const users = await fetchUsers();
console.log(users);
return users;
})
};
function UserList() {
const { data,isFetching,error,status } = useUsers();
const { users } = data;
// return some render with users
}
我的 fetchUsers 方法:
export function fetchUsers(fields = ['id','name']) {
console.info("fetch users");
return request(`${process.env.REACT_APP_SERVER_URL}/graphql`,gql`
query getUsers {
users {
${fields},nice
}
}`);
}
我的 App.js:
<QueryClientProvider client={queryClient}>
<ErrorBoundary
fallbackRender={({ error }) => (
<div>
There was an error!{" "}
<pre style={{ whiteSpace: "normal" }}>{error.message}</pre>
</div>
)}
onReset={() => {
// reset the state of your app so the error doesn't happen again
}}
>
<UserList/>
</ErrorBoundary>
</QueryClientProvider>
当我输入不存在的 graphql 字段(又名 nice
)时,我希望看到 ErrorBoundary 运行 - 但我的 React 应用程序崩溃了:
Error: Cannot query field "nice" on type "User". Did you mean "name"?
解决方法
您是否已将 useErrorBoundary: true
设置为打开该选项,因为我没有在您的代码中看到这一点
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。