Trying call useQuery in function with react-apollo-hooks

Question

I want to call useQuery whenever I need it,

but useQuery can not inside the function.

My trying code is:

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
    }
}
...

How do I call useQuery multiple times?

Can I call it whenever I want?

I have looked for several sites, but I could not find a solutions.

Answer 1

From apollo docs

When React mounts and renders a component that calls the useQuery hook, Apollo Client automatically executes the specified query. But what if you want to execute a query in response to a different event, such as a user clicking a button?

The useLazyQuery hook is perfect for executing queries in response to events other than component rendering

I suggest useLazyQuery. In simple terms, useQuery will run when your component get's rendered, you can use skip option to skip the initial run. And there are some ways to refetch/fetch more data whenever you want. Or you can stick with useLazyQuery

E.g If you want to fetch data when only user clicks on a button or scrolls to the bottom, then you can use useLazyQuery hook.

Answer 2

There's answering mentioning how useQuery should be used, and also suggestions to use useLazyQuery. I think the key takeaway is understanding the use cases for useQuery vs useLazyQuery, which you can read in the documentation. I'll try to explain it below from my perspective.

useQuery is "declarative" much like the rest of React, especially component rendering. This means you should expect useQuery to be called every render when state or props change. So in English, it's like, "Hey React, when things change, this is what I want you to query".

for useLazyQuery, this line in the documentation is key: "The useLazyQuery hook is perfect for executing queries in response to events other than component rendering". In more general programming speak, it's "imperative". This gives you the power to call the query however you want, whether it's in response to state/prop changes (i.e. with useEffect) or event handlers like button clicks. In English, it's like, "Hey React, this is how I want to query for the data".

Answer 3

You can use fetchMore() returned from useQuery, which is primarily meant for pagination.

const { loading, client, fetchMore } = useQuery(GET_USER_LIST);
const submit = async () => {
    // Perform save operation

    const userResp = await fetchMore({
      variables: {
          // Pass any args here
      },
      updateQuery(){

      }
    });
    console.log(userResp.data)
  };

Read more here: fetchMore

You could also use useLazyQuery, however it'll give you a function that returns void and the data is returned outside your function.

const [getUser, { loading, client, data }] = useLazyQuery(GET_USER_LIST);
const submit = async () => {
    const userResp = await getUser({
      variables: {
        // Pass your args here
      },
      updateQuery() {},
    });
    console.log({ userResp }); // undefined
  };

Read more here: useLazyQuery

Answer 4

You can create a reusable fetch function as shown below:

// Create query
const query = `
    query GetUserList ($data: UserDataType){
        getUserList(data: $data){
          uid,
          first_name
        }
    }
`;


// Component
export const TestComponent (props) {

  const onSaveInformation = async () => {
  
    // I want to call useQuery once again.  
    const getUsers = await fetchUserList();
  }
  

  // This is the reusable fetch function.
  const fetchUserList = async () => {

      // Update the URL to your Graphql Endpoint.
      return await fetch('http://localhost:8080/api/graphql?', {
      
          method: 'POST',
          headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json',
          },
          body: JSON.stringify({
              query,
              variables: { 
                 data: {
                    page: changePage,
                    pageSize: 10,
                  },
              },
          })
      }).then(
            response => { return response.json(); }  
       ).catch(
            error => console.log(error) // Handle the error response object
      );
  }

  return (
    <h1>Test Component</h1>
  );
  
}

Answer 5

Here's an alternative that worked for me:

const { refetch } = useQuery(GET_USER_LIST, {
    variables: {
      data: {
        page: changePage,
        pageSize: 10,
      },
    },
  }
);


const onSaveInformation = async () => {
    try {
      await updateInformation({...});
      const res = await refetch({ variables: { ... }});
      console.log(res);
    } catch (e) {
      return e;
    }
}

And here's a similar answer for a similar question.

Answer 6

Please use const { loading, data, refetch } = useQuery(Query_Data) and call it when you need it i.e refetch()