Seperate fetchMethods and react-query hooks in separate files to use in server and client side - Nextjs

[essuraj]

Thanks for this amazing plugin.
My current setup is to using Next 14.2.2 with react query. I need to use the fetch methods in server side (react hooks dont work in SSR). but because they are all in same file, i get SSR error as it import client side components. An option to seperate the files will be great thankyou.

[rajzik]

You can use fetcher in server components even with hooks in the file.
In my setup I have queries in separate package (monorepo) where using @org/query import points to index that have 'use client'; .
So for the next js server components I've added server only exports via the package.json exports.

// server.ts
import 'server-only';

export * from './someComponents';
export * from './someContext';
export type * from './someSchemas';

// package.json
"exports": {
    ".": "./src/index.ts",
    "./server/getQueryClient": "./src/provider/getQueryClient.ts",
    "./server/some": "./src/queries/some/server.ts"
  },

This way in the server component I can prefetch queries and fetch data without no issues.