react-apollo-hooks
react-apollo-hooks copied to clipboard
data set to {} between re-fetches
I created this small example to show my issue:
https://codesandbox.io/s/ovw0m6yl4z
Basically, every time I re-render the component and useQuery
fetches new data, the data
object is set to {}
while loading
is true
.
How can I preserve the previously fetched data while I load new data?
I generally store the data in another state variable then update it in a useEffect that checks if data exists and it's not loading before assigning the state variable.
const MyFuncComponent = () => {
const [notNullData, setNotNullData] = useState();
const { data, error, loading } = useQuery(QUERY);
useEffect(() => {
if (data && !loading) {
setNotNullData(data);
}
}, [data]);
return <ComponentThatRendersData data={notNullData} />;
};
Not sure if there is a better way or not. Also notNullData can actually be null when it's initialized, just bad naming variable on my part.
Also here's the updated example:
@Dastari thanks, but it would really make sense to fix it in this library... I tried to look at the code but couldn't figure out where the problem is.
Also, just for completeness, let's use hooks :-P
const useQueryNotBugged = (...args) => {
const [notNullData, setNotNullData] = useState();
const { data, error, loading } = useQuery(...args);
useEffect(() => {
if (data && !loading) {
setNotNullData(data);
}
}, [data]);
return { data: notNullData, error, loading };
};
I tried to add || result.loading
to https://github.com/trojanowski/react-apollo-hooks/blob/master/src/useQuery.ts#L140
The issue is the observableQuery
gets invalidated when the query variable change, so the observableQuery.getLastResult()
returns undefined, because we are asking the lastResult
to the wrong observableQuery
...
edit: I think I fixed it, I sent a PR (#121)
@FezVrasta long term it will be solved with a combination of React Suspense and Concurrent Rendering (it should even work in the current version, but it's experimental, and I don't recommend to use it in production). About PR #121 - I don't think it's a good idea - I think it's better to be more explicit than to show stale data. I'm also not sure if it works with fetchMore - please notice that loading
is set to true
during loading more data. I'd also prefer not to work differently than react-apollo here.
@trojanowski react-apollo doesn't empties the data object between refetches, this issue exists exactly because the behavior is different (and generates a bug on our app)
Please take a look at the same example, but made with react-apollo
:
https://codesandbox.io/s/ywp7w756vv
This is broken at present - upgrading from vanilla React Apollo to this breaks our app because the data disappears as soon as the refresh starts. Added CR comments, please prioritize if possible!
@trojanowski may we get an updated take on this issue after my recent clarifications?
If your concern with my PR is just the fetchMore
behavior, I can work on it and fix the issue (if present).
If you intend to keep this bug, please at least let us know so we can find alternative solutions.
Thank you for your work!
@FezVrasta I'm not a fan of this behavior (it's a breaking change for me in some cases), but I'm going to fix it to make it similar to react-apollo. I prepared #134 - it uses setValues
similar to how it's done there. It should also fix #129. Unfortunately, it requires further work (currently it breaks the suspense mode).
Any news on this ?