TanStackT
TanStack•2y ago•
1 reply
slow-yellow

Google Sheets API request in NextJS App router

I'm developing a NextJS app (v14) with server components, integrating React Query.

I've set up the QueryClient Provider for SSR and client-side caching (https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr).

When I log the request in the query function, it successfully fetches data.

My server-side component (
layout.tsx
):

 const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: ["data"],
    queryFn: getGoogleSheetsData,
  });

  return (
    <html
      lang="en"
      className="bg-white
    "
    >
      <body className={cn(inter.className, "h-screen")}>
        <Providers>
          <Header />

          <HydrationBoundary state={dehydrate(queryClient)}>
             {children}
          </HydrationBoundary>
        </Providers>


But, when I use the 
useQuery
 hook in the client-side like so:

const { data } = useQuery({
    queryKey: ["posts"],
    queryFn: getGoogleSheetsData,
  });


I get this error

Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/gcp-metadata/build/src/index.js
./node_modules/google-auth-library/build/src/index.js
./node_modules/googleapis/build/src/index.js
./app/lib/sheets.ts
./app/Header.tsx
 ⨯ ./node_modules/gcp-metadata/build/src/gcp-residency.js:19:0
Module not found: Can't resolve 'fs'
Overview | TanStack Query Docs
TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze.

Motivation
Was this page helpful?