在带有react-apollo-hooks的函数中尝试调用useQuery [英] Trying call useQuery in function with react-apollo-hooks
问题描述
我想在需要时调用useQuery
I want to call useQuery whenever I need it,
但是useQuery不能在函数内部.
but useQuery can not inside the function.
我尝试的代码是:
export const TestComponent = () => {
...
const { data, loading, error } = useQuery(gql(GET_USER_LIST), {
variables: {
data: {
page: changePage,
pageSize: 10,
},
},
})
...
...
const onSaveInformation = async () => {
try {
await updateInformation({...})
// I want to call useQuery once again.
} catch (e) {
return e
}
}
...
如何多次调用useQuery?
How do I call useQuery multiple times?
我可以随时叫它吗?
我已经寻找了几个站点,但是找不到解决方案.
I have looked for several sites, but I could not find a solutions.
推荐答案
useQuery
是一个声明性的React Hook.从经典的意义上讲,它并不是用来接收数据的.首先,请确保了解React Hook或暂时不使用它们(Stackoverflow上的问题有90%是因为人们试图一次学习太多东西而发生的).Apollo文档对于使用渲染道具的官方 react-apollo
软件包非常有用.这也一样有效,一旦您了解了Apollo Client 和挂钩,就可以进行一些重构.因此,您的问题的答案是:
useQuery
is a declarative React Hook. It is not meant to be called in the sense of a classic function to receive data. First, make sure to understand React Hooks or simply not use them for now (90% of questions on Stackoverflow happen because people try to learn too many things at once). The Apollo documentation is very good for the official react-apollo
package, which uses render props. This works just as well and once you have understood Apollo Client and Hooks you can go for a little refactor. So the answers to your questions:
如何多次调用useQuery?
How do I call useQuery multiple times?
您不会多次调用它.查询结果可用或更新时,组件将自动重新呈现.
You don't call it multiple times. The component will automatically rerender when the query result is available or gets updated.
我可以随时叫它吗?
Can I call it whenever I want?
否,只能在顶层调用钩子.而是从上部作用域(关闭)在您的函数中提供数据.
No, hooks can only be called on the top level. Instead, the data is available in your function from the upper scope (closure).
您的 updateInformation
应该可能是一个更新应用程序缓存的突变,由于它已订阅",因此再次触发了React组件的重新渲染.查询.在大多数情况下,更新是完全自动进行的,因为Apollo会通过 __ typename
和 id
的组合来标识实体.以下是一些伪代码,说明了突变如何与突变一起工作:
Your updateInformation
should probably be a mutation that updates the application's cache, which again triggers a rerender of the React component because it is "subscribed" to the query. In most cases, the update happens fully automatically because Apollo will identify entities by a combination of __typename
and id
. Here's some pseudocode that illustrates how mutations work together with mutations:
const GET_USER_LIST = gql`
query GetUserList {
users {
id
name
}
}
`;
const UPDATE_USER = gql`
mutation UpdateUser($id: ID!, $name: String!) {
updateUser(id: $id, update: { name: $name }) {
success
user {
id
name
}
}
}
`;
const UserListComponen = (props) => {
const { data, loading, error } = useQuery(GET_USER_LIST);
const [updateUser] = useMutation(UPDATE_USER);
const onSaveInformation = (id, name) => updateUser({ variables: { id, name });
return (
// ... use data.users and onSaveInformation in your JSX
);
}
现在,如果用户名通过突变更改,则Apollo将自动更新缓存并触发组件的重新呈现.然后,该组件将自动显示新数据.欢迎使用GraphQL的强大功能!
Now if the name of a user changes via the mutation Apollo will automatically update the cache und trigger a rerender of the component. Then the component will automatically display the new data. Welcome to the power of GraphQL!
这篇关于在带有react-apollo-hooks的函数中尝试调用useQuery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!