Apollo-client: The useQuery function always returns loading result. Why is it happening?

[vicsous]

Hello!

So, I am building a simple Apollo app but seems the useQuery function isn't fetching the data as expected.

Intended outcome:
The variable data loads the query.

Actual outcome:
App get stuck in loading page.

Versions
"dependencies": {
"@apollo/client": "^3.0.0-rc.6",
"@apollo/react-hooks": "^3.1.5",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"apollo-boost": "^0.4.7",
"apollo-client": "^2.6.10",
"dotenv": "^8.2.0",
"graphql": "^14.6.0",
"graphql-tag": "^2.10.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
Node: 12.18.0
NPM: 6.14.4
Ubuntu 19.04

[dylanwulf]

Hello! Would you mind providing some more information about your code and the scenario you're encountering? A runnable reproduction would be very helpful.

[vicsous]

Hello. I uploaded the whole project:
https://github.com/vicsous/apollo-react-app.git

[jharding]

I'm experiencing a similar issue with 3.0.0-rc.6 (also was able to reproduce with 3.0.0-rc.0). Here's a summary of what I'm experiencing:

I use useQuery to load a query. The network request completes successfully, however the hook does not reliably update – occasionally (maybe 50% of the time) it stalls out and remains in a loading state.

This is what my code looks like (useComparisionPageBoot is just a wrapper around useQuery that injects the gql):

 const { loading: authLoading, user } = useAuth();

 const { loading, data, refetch } = useComparisonPageBoot({
    skip: authLoading || !user,
    variables: { id },
  });

I'll dig in further to see if I can diagnose the underlying issue.

---

Quick update. Interestingly enough, when I remove the skip option, I no longer experience the issue. Fortunately for me the skip usage was obsolete so I can address the issue by removing it.

[dylanwulf]

@vicsous I took a look at your project. The problem is actually in your setup, not in Apollo Client. The line require('dotenv').config(); does not work like you expect when it runs in the browser, so process.env.API_URI is undefined.

[vicsous]

Now I see what I've done wrong. Thank you, @dylanwulf.