CODEWITHSUNDEEP
reactjspromisegraphqlreact-apollo
tronx.dev
tronx.dev

Reputation: 138

Unhandled Rejection (TypeError): Cannot read property 'refetch' of undefined - GraphQL

Today I faced an issue with GraphQL in my React.js project. What I tried to do is refetch a query once a mutation is completed. My codebase is as below

const getUserTeamQuery = useQuery(getUserTeam(usersFragment))
const data = get(getUserTeamQuery, 'data.getUserTeam')

const [updateUser] = useMutation(updateUserMutation(usersFragment), {
  onCompleted: () => {
    getUserTeamQuery.refetch()
  }
})

const updateTeam = async () => {
  await updateUser({ variables: { input: { pullTeam } } })
}

I've also posted this issue in Github: https://github.com/apollographql/react-apollo/issues/3862

DEPENDENCIES

"@apollo/react-hooks": "^3.1.3",
"apollo-cache-inmemory": "^1.6.3",
"apollo-client": "^2.6.4",
"apollo-link": "^1.2.13",
"apollo-link-context": "^1.0.19",
"apollo-link-error": "^1.1.12",
"apollo-link-http": "^1.5.16",
"apollo-upload-client": "^11.0.0",
"react": "^16.10.2",
"react-apollo": "^3.1.3",

Is there any solution to fix the issue?

Upvotes: 4

Views: 3321

Answers (2)

Osama Abid
Osama Abid

Reputation: 95

Super fast rendering of component may cause this issue, i solved it via setting timeout of 1 second, and its working perfectly fine. Like this:

setTimeout(() => refetch(), 1000);

Upvotes: 0

mj328
mj328

Reputation: 122

Here is how I fixed the issue on my side. 

const [updateUser] = useMutation(updateUserMutation(usersFragment), {
  refetchQueries: [`getUserTeam`]
})

You should use refetchQueries instead of onCompleted in useMutation's options.

It should work!

Upvotes: 1

Related Questions