reactjs - react-query with graphql-request：错误边界未运行

Question

我有以下代码：

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 字段（aka nice）时，我希望看到 ErrorBoundary 正在运行 - 但我的反应应用程序崩溃：

Error: Cannot query field "nice" on type "User". Did you mean "name"?

为什么错误边界没有捕捉到这个错误？知道我错过了什么吗？

Answer 1

您是否已设置useErrorBoundary: true打开该选项，因为我没有在您的代码中看到该选项