Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Next.js + 3.4 useQuery stuck on Loading

See original GitHub issue

In Apollo Client 3.4.3 our useQuery hook stopped working correctly. On page load, useQuery will be stuck on loading: true. Refreshing the page will then let useQuery resolve correctly.

Reverting to 3.3 fixed the issue.

 "@apollo/client": "^3.4.3",
"next": "11.0.1",

  const { loading, error } = useQuery<CartQueryProps>(CART_QUERY, {
    onCompleted: (data) => {
      console.info("completed CART_QUERY", {
        data,
        loading,
        error,
      });
    },
    onError: (error) => {
      console.error(error);
    },
  });
  
  console.log({data, loading, error})

Issue Analytics

State:
Created 2 years ago
Reactions:12
Comments:25 (11 by maintainers)

Top GitHub Comments

4reactions

tm1000commented, Aug 10, 2021

I can confirm what @Woong25 is saying. Having the option ssrForceFetchDelay set causes infinite loading. I’m not sure why i ever set this to begin with as I dont have the associated ssrMode setting! (probably some regression from next.js 9 and apollo 2.x YEARs ago) once I remove it everything works splendidly

I know a reproduction demo would be nice to have but since I’m not using any of the SSR options myself removing ssrForceFetchDelay was the fix. However this wasn’t an issue before 3.4. I believe at one point in the past I actually tried to use SSR with apollo but that was back in NextJS 9.1 and Apollo 2.x and even before hooks blewup in react. Since then I removed all SSR options from apollo itself

@brainkim #5918 looks similar yes, but as I told my team when they pointed that out #5918 is a whole pandemic ago. This just started appearing recently. Probably/definitely related though

3reactions

gwyneplainecommented, Aug 4, 2021

Hello, we’re also experiencing the exact same symptoms in the Keystone project. We leverage both Next.js and Apollo, and have pinned to @apollo/client@3.3.21 temporarily to workaround this.

Would appreciate any additional insight into why this might be happening 🙏 Here’s a minimal viable reproduction of the bug we’re seeing in our project.

https://github.com/gwyneplaine/keystone-apollo-bug-repro

Top Results From Across the Web

Loading stuck on true when using useLazyQuery in React - Help

Hey fellas, i'm using useLazyQuery to login to the server. it was working great until today. It suddenly stopped working.

Next js stuck on loading - javascript - Stack Overflow

I made the chart to be drawn after the loading spinner comes out when the state is undefined. However, when run on localhost...

next-with-apollo - npm

lib/withApollo.js import withApollo from 'next-with-apollo'; ... data } = useQuery(QUERY); if (loading || !data) { return <h1>loading.

SSR | TanStack Query Docs

React Query supports prefetching multiple queries on the server in Next.js and then dehydrating those queries to the queryClient. This means the server...

Fixing Next.js router query param returning undefined on ...

If you're getting undefined query params in nextjs on the first render ... using next.js, I stumbled upon an issue that kept me...