loading stuck on true when using useQuery hook? #3270
Comments
|
I've been finding that sometimes I don't seem to get the second call of the component even though the data has loaded - I am currently triggering a state change with the onCompleted call back |
|
@MaxwellGover FYI the previous version (@apollo/react-hooks 0.1.0-beta.10) seems to work for me. |
|
@MaxwellGover i just tried beta 10 and fixes my issue.. |
|
Also my components continually refresh when using beta 11 whereas when I change to beta 10 this stops happening - I suspect this is also related to the browser eventually crashing. beta 11 is unwell IMO |
|
I'm using react-apollo 3.0.0-beta4 which uses 0.1.0-beta.11 and I have the same issue. The loading state stays true and I can see in the network inspector that the data has arrived, it just has never re-rendered. I suspect it has something to do with the fact that I'm using 2 hook queries in 1 component? |
|
@hmeerlo I don't think so, I am also using beta.11 and I have this issue with a simple 1 query component: const BOOKS_GQL = gql`
query GetBooks {
books {
id,
author,
title
}
}
`
const BookList = () => {
const { loading, data } = useQuery<GetBooks>(BOOKS_GQL)
if (loading) return <p>Loading...</p>
if (!data) return <></>
return (
<div>
{data.books.map((book, idx) => {
return <p key={idx}>{book.title} by {book.author}</p>
})}
</div>
)
}
const App = () => (
<ApolloProvider client={client}>
<div>
<h2>Typehint all the things and eat delicious chicken wings</h2>
<BookList />
</div>
</ApolloProvider>
) |
|
I'm using |
|
@hwillson any clue about this issue? If you give a direction, I could try to open a PR. I tried to investigate, but I couldn't grok QueryData entirely. |
|
After some debugging locally, at least for me it only occurs when the result of the Query has 1 item. If the result of the Query has more than 1 item, |
|
@MichaelHindley not for me, the result of the query is the same all the time, but it randomly exits the loading state. Maybe it's timing related or just random :-) |
|
I notice something really weird, if I set in the network panel some network throttling, for example, This implementation is not affected: https://github.com/trojanowski/react-apollo-hooks |
|
@Bedotech I think you are on to something. I just encountered this bug in our product after implementing caching on the server which means queries are returned a lot faster. If i introduce a slowing using a sleep on the server everything works as expected. Seems like some sort of race condition to me. |
|
There's definitely the race condition. What happens sometimes, is that something else change in the component or in the tree, triggering a re-render and removing it from the stuck state. Ideally, we should store |
|
This seems to be manifesting itself in #3009 - the client-only data resolves immediately, triggering the race condition. |
|
Hi all - I'm just getting back from vacation, and am slowly re-learning how to type. I'll digest this more thoroughly shortly. |
|
Thank you @hwillson |
|
This is an issue for me as well. Currently getting around it by forcing multiple rerenders via state change from the |
|
onCompleted seems like a solution now...... any update? |
|
I was also experiencing this issue on |
|
Should we roll back to 0.1.0-beta.10? |
|
Does anyone here have a small runnable repro that shows this happening? This is on my radar to fix today, and a runnable repro would greatly help. |
|
@MaxwellGover I can't seem to re-create this issue using a fork of the hooks example app. If it's still happening for you consistently, could you share your fork so I could try it out directly? @Bedotech The internals of @viniciusdacal our use of |
|
Hmm - #3299 definitely sounds related. I'll run with that repro for now. |
|
This also reproduces for me on |
|
I've found the issue; it's a race condition between the response coming back through the internal Apollo Client |
When new data or errors are reported back through the `ObservableQuery` subscription, `updateCurrentData` is called to trigger a forced update of the parent component (to reflect the new component state). Before triggering the forced update however, `updateCurrentData` first checks to see if the component is mounted (since we don't want to try to trigger a forced update on a copmonent that isn't mounted). Unfortunately, a component isn't marked as being mounted until the `afterExecute` method is called via a `useEffect`. Under certain circumstances it's possible for the `ObservableQuery` subscription to be initialized and get data back before the `useEffect` has fired and marked the component as mounted. This means when `updateCurrentData` is triggered with valid updates, they're sometimes blocked, and the component gets stuck in a permanent loading state. Due to other recent cleanup changes, we're now tracking the destruction of the `ObservableQuery` subscription in a `useEffect` within `useBaseQuery`. The subscription cleanup is fired only when the component unmounts, and since we're only calling `updateCurrentData` from within the subscription callback, we don't need to have an extra `isMounted` check before forcing an update. To this end, these changes get rid of `updateCurrentData` completely. The `ObservableQuery` subscription now always calls `forceUpdate` directly, and as long as the component is mounted (tracked by React), it will always force an update. This prevents race conditions between data attempting to be updated, and the component not yet being marked as mounted. Fixes #3270. Fixes #3299.
|
Update to .12 fixed my issue too |
|
update to .12 fixed issue!!!!!!!!!! |
|
|
|
Thanks for the quick fix and the awesome library @hwillson! |
|
I'm still getting this on react-apollo@3.0.1, @apollo/react-hooks@3.0.1. You can inspect the network and see that the request has completed with data, but it still will say loading. It works sometimes. When I first began this morning is successfully set loading=false, but on the second load it didn't (even on hard refresh). Then every 30 minutes or so it will set loading=false. Maybe related to development/hot-reloading. |
|
well i faced this issue on @apollo/react-hooks:0.1.0-beta.10. but in my case it is no longer visible on @apollo/react-hooks@3.0.1 until now |
|
Contrary to my above comment, I am still getting this issue. However, only in our live deployment, not in local dev... No idea where to look though. Would be happy to try to generate a reproduction but not sure where to start if it's only in live! Open to ideas if anybody has any... |
|
Having the same issue with both Related deps: Query is just a simple query: const GET_DATA = gql`
query GetData(
$ID: String!,
) {
GetDataFoo(
ID: $ID,
) {
data {
time
foo
}
}
}
`;
...
const x = useQuery(GET_DATA, {
variables: {
id
},
}); |
|
some new solution? @hwillson |
|
Face same issue here: Been searching online for hours for this now, and I just did a hacky way to solve it, by using |
Same problem, although I have upgraded to: |
|
still a problem with |
|
I m getting the same problem locally. I can see the query has returned results in the chrome network tab:
More over if I do this: const link = new HttpLink({ uri: "https://localhost:4001/api" });
const cache = new InMemoryCache();
const client = new ApolloClient({ cache, link });
client
.query({
query: gql`
{
property {
images {
url
}
}
}
`,
})
.then((result) => console.log(result));It also console logs what I would expect. However in the component, when using a hook: const { loading, error, data } = useQuery(IMAGE_QUERY, {
notifyOnNetworkStatusChange: true,
});
console.log(data);
console.log(error);
console.log(loading);Data is always |
|
I seem to have this same issue with @apollo/client 3.0.0-beta.7. I'm running on react-native (expo) while connected to the React Native Debugger. If I disconnect from the debugger, I don't seem to have this issue. The version of React Native Debugger I'm using is 0.10.2. Perhaps this issue is with RND? |
I have exactly the same issue |
|
I found a workaround in 3.1.3, which is to set |
|
I am not sure either but when I've removed |
|
Same issue here. None of the above hacks seem to work for me. We tried refetch, forced rerender after a few seconds, not working. However setting |
|
For a temporary solution, you can try to set |
|
I had the same issue on import React from "react";
import {FormattedMessage} from 'react-intl';
import {loader} from 'graphql.macro';
import {useQuery} from '@apollo/react-hooks';
const Workspace = () => {
const GET_WORKSPACE = loader('./../../../graphql/Workspace/get_workspace.graphql');
const {loading, error, data, refetch} = useQuery(
GET_WORKSPACE,
{
variables: {user_id: "12345"},
onCompleted: data => { }
}
);
if (loading) return 'Loading...';
if (error) return `Error! ${error.message}`;
return (
<div style={{padding: 24, background: '#fff', minHeight: 360}}>
<h2><FormattedMessage id="dashboard.tasks.title" defaultMessage="Tasks"/></h2>
{data.workspace.map(item => (
<span key={item.id}> {item.name}</span>
))}
<button onClick={() => refetch()}>Refetch!</button>
</div>
);
};I found a solution of my infinite loop/loading stuck issue, just passing an empty function to I tried with |
|
I'm seeing this at a very intermittent fashion. Happened on its own in production, then disappeared, then happened again. I'm guessing it's dependent on the response data/timing/headers, etc...? What I was seeing is that both I don't know if I'll be able to reproduce this. |
|
I believe apollographql/apollo-client#6120, just released in |
|
Got stuck for this in a while, but figured out watching for the data instead of the loading flag works for me. |
|
I'm having the same issue with One of the components rerenders once loading is completed and shows the data. The other one does not. I'm working around the issue by manually storing the result in local state: function MyComponent() {
const [data, setData] = useState(null);
useQuery(DOCUMENT, {
variables: { ... }
onCompleted: (data) => setData(data);
});
return <>{JSON.stringify(data)}</>
} |
|
I have a similar problem. |
|
same problem here. |
|
I was experiencing this problem which after some digging into my code ended up being caused by Moving the const declaration of the query to the top of the file beneath the |
and others
I forked the hooks example from the react-apollo repo and it seems like the value for loading is never being updated, even when the data is being returned properly?
I set up my own project and was experiencing the same issue when using
useQueryUPDATE: After adding an item, useQuery seems to work fine
Intended outcome:
value of
loadingchanges to false when data is availableActual outcome:
value of
loadingnever updates to falseVersion
The text was updated successfully, but these errors were encountered: