What is the Syntax for Refetching a Query after a Local State Change in React

Question

I am relatively new to Apollo and GraphQL, and I need to make a requery after several mutations, since the recoil states don't want to update in time and a million errors get thrown off after some of the mutations. I simply put do not know how to do this and have been unable to find any relevant documentation to my scenario. The following code is inside of theApp.js file.

// Mutations
  const { loading: loadingO, error: errorO, data: dataO, refetch: refetchO } = useQuery(GET_OWNER)
  const { loading: loadingM, error: errorM, data: dataM, refetch: refetchM } = useQuery(GET_MANAGER)

  const handleRefresh = () => {
    setRefresh(!refresh)
    if (role && id){
      if (role == "MANAGER"){
        // reftechM
      }
      if (role == "OWNER"){
        // refetchO
      }
    }
  }

  useEffect( () => {
    console.log("???")
  }, [refetchM, refetchO])

...where handleRefresh is essentially called after every mutation, or of course, every refresh. However, just calling refetch does not work, and I have been very unable to find the proper syntax for my issue. Does anyone know the solution?

Answer 1

By default, the useQuery hook checks the Apollo Client cache to see if all the data you requested is already available locally. If all data is available locally, useQuery returns that data and doesn't query your GraphQL server. This cache-first policy is Apollo Client's default fetch policy. If you say that you will call handleRefresh() after mutation the below code will work fine.

here read fetch policy

  const { loading: loadingO, error: errorO, data: dataO, refetch: refetchO } = useQuery(GET_OWNER, {
  fetchPolicy: "network-only",
})
  const { loading: loadingM, error: errorM, data: dataM, refetch: refetchM } = useQuery(GET_MANAGER, {
  fetchPolicy: "network-only",
})

  const handleRefresh = () => {
    setRefresh(!refresh)
    if (role && id){
      if (role == "MANAGER"){
        refetchM()
      }
      if (role == "OWNER"){
        refetchO()
      }
    }
  }