Error: Attempted to call useQuery() from the server but useQuery is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Compone nt or passed to props of a Client Component.

[enkhee]

Summary

"next": "^13.5.1",
"@tanstack/react-query": "^4.35.3",

Additional information

No response

Example

await queryClient.prefetchQuery(
[API_ENDPOINTS.NEWS, 'solution'],
useTechnologySolutionQuery
);

export const fetchTechnologySolution = async () => {
const { data } = await http.get(
${API_ENDPOINTS.NEWS}?categories.code=solutions
);
return data as News[];
};

export const useTechnologySolutionQuery = () => {
return useQuery<News[], Error>([API_ENDPOINTS.NEWS, 'solution'], () =>
fetchTechnologySolution()
);
};
No response

[rajeshr-anzilsoft]

Is this issue resolved yet?

[sianami123]

same issue
any update?
stitched-error.ts:23 Uncaught Error: Attempted to call useQuery() from the server but useQuery is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.
at useProducts (queries.ts:18:17)
at Products (products.tsx:18:48)
at resolveErrorDev (react-server-dom-turbopack-client.browser.development.js:1838:46)
at processFullStringRow (react-server-dom-turbopack-client.browser.development.js:2218:17)
at processFullBinaryRow (react-server-dom-turbopack-client.browser.development.js:2206:7)
at progress (react-server-dom-turbopack-client.browser.development.js:2452:17)
at InnerLayoutRouter (layout-router.tsx:408:5)
at OuterLayoutRouter (layout-router.tsx:607:19)

[dondxniel]

Having the issue too.

[icyJoseph]

Is this happening because Client Components get SSR'd?