T
TanStack•2y ago
unwilling-turquoise

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>
 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,
  });
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'
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
1 Reply
unwilling-turquoise
unwilling-turquoiseOP•2y ago
... Here is the getGoogleSheetsData request: 
import { google } from "googleapis";

export async function getGoogleSheetsData() {
  try {
    const target = ["https://www.googleapis.com/auth/spreadsheets.readonly"];
    const jwt = new google.auth.JWT(
      process.env.GOOGLE_SHEETS_CLIENT_EMAIL,
      undefined,
      (process.env.GOOGLE_SHEETS_PRIVATE_KEY || "").replace(/\\n/g, "\n"),
      target,
    );

    const sheets = google.sheets({ version: "v4", auth: jwt });
    const response = await sheets.spreadsheets.values.get({
      spreadsheetId: process.env.SPREADSHEET_ID,
      range: "data",
    });

    const rows = response.data.values;
    console.log(rows);
    if (rows?.length) {
      return rows;
    }
  } catch (err) {
    console.log(err);
  }
  return [];
}
import { google } from "googleapis";

export async function getGoogleSheetsData() {
  try {
    const target = ["https://www.googleapis.com/auth/spreadsheets.readonly"];
    const jwt = new google.auth.JWT(
      process.env.GOOGLE_SHEETS_CLIENT_EMAIL,
      undefined,
      (process.env.GOOGLE_SHEETS_PRIVATE_KEY || "").replace(/\\n/g, "\n"),
      target,
    );

    const sheets = google.sheets({ version: "v4", auth: jwt });
    const response = await sheets.spreadsheets.values.get({
      spreadsheetId: process.env.SPREADSHEET_ID,
      range: "data",
    });

    const rows = response.data.values;
    console.log(rows);
    if (rows?.length) {
      return rows;
    }
  } catch (err) {
    console.log(err);
  }
  return [];
}
Of course, I don't want this to run on the client, and I KNOW it runs on the server perfectly fine. This error suggests the request is running on the client side. What have I done wrong?

Did you find this page helpful?