[Issue]: NextJS 14 failing to run useQuery calls that are Live Queries

[Robert Byrne]

Description

Hey Wundergraph team 👋 ,

We have an app which we have migrated over to using NextJS 14, and most things have gone as expected. We are running into an issue with Live Queries though.

When it works

The useQuery will work under the following conditions:

• The component it is used in is a "use client" component.
• It's parent component is also a "use client" component.
• The liveQuery flag is NOT set

const { data, error, isLoading } = useQuery({  
    operationName: 'GetMyData',  
    input: {  
        active: true  
    },  
    suspense: true,  
})

When it fails

const { data, error, isLoading } = useQuery({  
    operationName: 'GetMyData',  
    input: {  
        active: true  
    },  
    suspense: true,
    liveQuery: true, 
})

1. If the above "use client" conditions are true but the liveQuery flag is set to true, then we get the following error:

Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.

2. If we move this useQuery call to a server component (or if the parent component is a server component) and then using the query (with our without the liveQuery set tot true), it fails and returns this error:

./node_modules/@wundergraph/swr/dist/index.mjs Attempted import error: 'swr' does not contain a default export (imported as 'useSWR').

Question

Is there a way to get liveQuery working in NextJS 14 or is this in issue within the wundergrpah library.

Background info

Library version we are using:

"node": "20.3.0"
"@wundergraph/nextjs": "^0.14.10",  
"@wundergraph/sdk": "^0.180.1",  
"graphql": "^16.8.1",
"next": "^14.0.2",  
"react": "^18.2.0",
"swr": "^2.2.4",  

Also, worth noting that we have the live queries configured in our config:

export default configureWunderGraphOperations<OperationsConfiguration>({
	operations: {
		defaultConfig: {
			authentication: {
				required: false,
			},
		},
		queries: (config) => ({
			...config,
			caching: {
				enable: false,
				staleWhileRevalidate: 60,
				maxAge: 60,
				public: true,
			},
			liveQuery: {
				enable: true,
				pollingIntervalSeconds: 1,
			},
		}),
		mutations: (config) => ({
			...config,
		}),
		subscriptions: (config) => ({
			...config,
		}),
	},
});

Reproduction

In a wundergraph app using NextJS version 14,

• Create a query
• Add it to a client component which has a parent who us a client component as well
• See the query return data
• Follow the steps 1 and 2 in the ticket description to reproduce the 2 different errors when trying to run a live query

[Robert Byrne]

There seems to be a similar ticket which I have commented on here:

#1350 (comment)

But their issue doesn't seems to be with liveQueries, so this may be a separate issue which I will keep open.

[Eelco Wiersma]

I don't think using both suspense and live query will work at the moment. Can you confirm it's working with suspense disabled?

useQuery should always be used in a client component.

[Robert Byrne]

Hey @Pagebakers, thanks a lot for your response. It looks like you were right that the issue was using both "suspense" and "liveQuery" and the it worked as expected. Thanks again for the quick and helpful response.

I'm going to close this ticket as it is no longer an issue

[Eelco Wiersma]

If you want to use suspense, you could disable liveQuery initially and only after first render on the client enable live query.

[Robert Byrne]

Thanks @Pagebakers, thats a great idea. We will give that a shot 🍻