React-apollo: Query callback

[deoqc]

Is there any way to call a callback after the query has finished loading?

[jbaxleyiii]

@deoqc you can use componentWillRecieveProps to do it!

componentWillRecieveProps(nextProps){
  if (!nextProps.data.loading && this.props.data.loading) {
    doMyCalBack();
  }
}

[deoqc]

Yeah, I think I remember having in library in the past, but no problem using it in component.

Thanks!

[richardgirges]

(accidentally deleted my previous comment)

I was wondering if there are any alternatives to firing a callback from componentWillReceiveProps? One issue I keep running into is not having the data on hand when firing the callback from componentWillReceiveProps.

For example:

componentWillRecieveProps(nextProps){
  if (!nextProps.data.loading && this.props.data.loading) {
    doMyCalBack();
  }
}

Then in doMyCallback():

doMyCallback() {
  const { foo } = this.props.data;

  alert(foo.message); // TypeError: Cannot read property 'message' of undefined
}

You could argue that I can just pass this.props.data.foo as an argument in the doMyCallback() method. But if there are various methods in the component, perhaps methods that can be called in multiple contexts that require usage of the data, it will send me a down the rabbit hole of passing data from method to method.

This gets kinda messy because in some cases, I can comfortably execute doMyCallback() _knowing_ that I have the data on hand. Perhaps my approach is antonymous to the way react-apollo is meant to be used. If that's the case, can you give some pointers on how this scenario should be handled?

If the answer is to simply pass props throughout the component's methods, then I'll take it.

Thanks!

[Harokku]

Try pass nextProps to your callback and use it for your calculations.

this.props.data isn't already updated since u're inside componentWillRecieveProps

[johhansantana]

This is kind of annoying not being able to make a callback when query finishes fetching.

componentWillReceiveProps(nextProps: Props) {
  const { getProduct, setProductFiles } = nextProps
  if (!nextProps.getProduct.loading && this.props.getProduct.loading) {
    const images = []
    getProduct.Product.images.forEach(i => {
      let image = {...i}
      image.preview = i.url
      images.push(image)
    })
    setProductFiles(images)
  }
}

only works the first time the query is called, if you keep navigating around and comeback to the same route, the code inside the condition will not be called again, thus in my code, the images will not get refreshed and will show the last viewed item images.

How can I get pass this?

[lirenyeo]

@johhansantana Have you found any workaround for that issue?

[Kisepro]

Waiting for solution too.

My problem is the same than @johhansantana with the latest packages.

[johhansantana]

Hey @lirenyeo @Kisepro I think I fixed by using the fetch policy option in Apollo

https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-fetchPolicy

And using the option called network-only

[Kisepro]

@johhansantana Yeah could be a nice workaround of a workaround :D

The only problem could be the performance since it's not retrieved from the cache

[birge]

This work around is going away with React 17, seems more than ever we will need a callback provided by Apollo.

[jlubeck]

Should this be reopened?

[spyshower]

This reminds me of the ancient years, where each improvement/advancement came after yeeeeeears.

[shreyansh2495]

You can do something like this if you are making use of functional component
useEffect(() => {
if(data)
//do Something
}, [loading]);