After refetch is done, component is not re-rendered

[danielkcz]

I got a repro here which I made for the article (in works): https://codesandbox.io/embed/qzjzr583yq

Watch the console

1. first image loads just fine
2. in the input on top enter some other value, eg. "kitten"
3. different image is loaded
4. change the input back to any other value
5. refetch is executed, data arrive and yet no re-render happens
6. changing input again and it's the same, new data are flowing, but are not processed

Now the strangest part is that if you click on the little button to refresh same tag, it works perfectly.

If there is some mistake on my part, I do apologize, but I wasn't able to spot it.

You can also see error reported in #74 in here if you enter some tag that has no giphy associated.

[trojanowski]

@FredyC I'm not sure if it will be very helpful, but I was able to create a working version (without using mobx): https://codesandbox.io/s/9ym945qn2w

[danielkcz]

Yea, well, nothing surprising there since everything is re-rendering then obviously the useQuery gets re-rendered as well and show latest data.

This is kinda what the article is supposed to be about, to be able to re-render affected component only. Oh well, I will try to dig deeper.

[trojanowski]

This is kinda what the article is supposed to be about, to be able to re-render affected component only. Oh well, I will try to dig deeper.

It should also work. Please look at: #83 (comment)

[danielkcz]

@trojanowski That's not what I want. The local state will obviously work, but imagine it needs to go through like 10 or more layers to a completely different part of the app. Prop drilling is an ugly beast ⚔️

You can have a look at the article (it will be officially published on Monday) to see what I mean.

[danielkcz]

Nonetheless, it feels like an upstream bug. After a bit of debugging it seems that ObservableQuery subscribe is not randomly invoked and setResponseId is not called to re-render the component. That's really odd.

[maxguzenski]

I dont know if this is related, but I put a solution right now at #74

[palindrom615]

I am using ^0.4.5, and did not experience the problem though my code is almost the same with that of @FredyC. Only one difference is that I use refetch function without variables or other parameters. just

const RefetchButton = ({refetch}) => 
  <Button onClick={refetch} />;

Clicking this button triggers data fetching of useQuery in the parent component. I have not checked the source code of react-apollo-hooks yet, but I guess you deserve to try moving parameter to hook itself.

btw, it seems something wrong with fetching data in the sandbox example.

---

after try, I found calling refetch function with variable parameter does not trigger updating the original query.

[rafbgarcia]

I'm experiencing this with [email protected].

Does anybody know whether this was already fixed or can point me out to a discussion/solution?

Thanks.

[danielkcz]

I know only about react-apollo, the apollo-react is something old and different. Either way, this is definitely a wrong repo. I am not aware of the same issue in the official library, so if you have some issue, you shall open it.