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 设置为打开该选项，因为我没有在您的代码中看到这一点