React / General

refetchQueries in Mutation Component of React Apollo Client is not working?

refetchQueries in Mutation Component of React Apollo Client is not working?

React/General · August 5, 2018 at 3:19pm

refetchQueries in Mutation Component of React Apollo Client is not working?

React / General · August 5, 2018 at 3:19pm(Edited 2 months ago)

I have a <Query /> in my Home.js file

Home.js

<Query query={GET_TODOS_BY_PRODUCT} variables={{ id: state.get("selectedProduct.id"), completed: true }} > {({ data: { product } }) => { return <Main todos={product.todos} hashtag={product.hashtag} />; }} </Query>

In my Main.js file I have <Mutation /> component -

Main.js

<Mutation key={v4()} mutation={SWITCH_SELECTED_PRODUCT} refetchQueries={() => { console.log("refetchQueries", product.id) return { query: GET_TODOS_BY_PRODUCT, variables: { id: product.id } }; }} > {switchSelectedProduct => ( <Product onClick={() => { switchSelectedProduct({ variables: { id: product.id, name: product.name } }); }} highlight={ data.selectedProduct ? product.name === data.selectedProduct.name : i === 0 } > <Name>{product.name}</Name> </Product> )} </Mutation>

When switchSelectedProduct is called inside <Mutation /> component, it runs refetchQueries as I see the console.log("refetchQueries", product.id); statement but I don't see the updated results in the <Query /> component in Home.js file.

How do I tell <Query /> component in Home.js to get notified when refetchQueries is run in Main.js file?

I have also posted this on Stack Overflow to get help faster https://stackoverflow.com/q/51695337/6141587
Any suggestions?

August 5, 2018 at 4:08pm

Is it possible that the variables not being the same is preventing the Query component from updating? The Query component has a completed: true variable in the query, but your refetch queries does not.

like-fill
1
  • reply
  • like

Usually issues like this I've encountered are due to mismatched variables

  • reply
  • like

From docs: `refetchQueries: (mutationResult: FetchResult) => Array<{ query: DocumentNode, variables?: TVariables} | string>`, so probably you need to return an array instead of just the object

<Mutation
key={v4()}
mutation={SWITCH_SELECTED_PRODUCT}
refetchQueries={() => {
console.log("refetchQueries", product.id)
return [{
query: GET_TODOS_BY_PRODUCT,
variables: { id: product.id }
}];
}}
>

like-fill
2
  • reply
  • like

August 6, 2018 at 10:04am

Hey @alexhenkel thanks your reply worked but I'm having issues regarding the `<Query />` not re-rendering again. How can I solve that problem?

  • reply
  • like

Data gets fetched

  • reply
  • like

I can see it in the Network Tab

  • reply
  • like

But <Query /> component isn't re-rendered

  • reply
  • like

I have also changed the <Query /> variable id to use this.state.selectedProduct.id rather than using state from electron-store like state.get('selectedProduct.id')

  • reply
  • like

It looks like this now

  • reply
  • like
const { selectedProduct } = this.state;
<Query query={GET_TODOS_BY_PRODUCT}
variables={{ id: selectedProduct.id, completed: true }}
>
{({ data: { product } }) => {
return <Main todos={product.todos} hashtag={product.hashtag} />;
}}
</Query>
  • reply
  • like

I guess my problem is selectedProduct.id is still static & set to the same thing

  • reply
  • like

But I want to send id from the <Mutation /> component mentioned above & provide it to the <Query /> component which is in another file

  • reply
  • like

I've only done it without variables so its easy then but with variables Idk how to tackle that

  • reply
  • like

Is this related https://github.com/apollographql/apollo-client/issues/3633 ? And if so anyone can tell me which version of Apollo Client & React Apollo works with refetchQueries updating UI

  • reply
  • like
  • reply
  • like

Is it possible that the variables not being the same is preventing the Query component from updating? The Query component has a completed: true variable in the query, but your refetch queries does not.

Brian you are right. id variable was using state from electron-store but I've changed it to use React's State (see the chat message above) but still isn't working. I'll check Spectrum code if I can find a solution. I think refetchQueries is broken in the new version so if you guys are using it in Spectrum & it works I'll use your version of the library :)

  • reply
  • like

Also, regarding completed: true I have a default value of completed false so no issues with that since I only have todos for completed: true

  • reply
  • like
Your message here...

*bold*_italic_`code````codeblock```