NextJS + React Query... "window is not defined"

[adamhp]

I'm getting "window is not defined" on first load when attempting to use useMutation. I think I understand that this is because NextJS is attempting to render this on the server and there is no window. Is there anyway to defer importing or referencing window in useMutation or useQuery until the window is defined? I've tried dynamic imports but without much success.

Steps to reproduce are to simply attempt to use "useMutation" inside of another hook, and then import that into a component. I'm even using 'use client' declaration for basically every part of this.

[adamhp]

A bit more context — I am importing a component into a "page" in NextJS, and that component is importing my custom hooks with either mutations or queries. A simple workaround is to make these imports dynamic, so as an example.

// page.tsx
// Home page in NextJS importing custom components
const ShowPosts = dynamic(() => import('@/components/ShowPosts'), {
  loading: () => <Spinner />,
  ssr: false,
});

export default function Home() {
  return (
    <main>
      <ShowPosts />
    </main>
  );
}

// ShowPosts.tsx
// Component that is importing my own custom hooks using react-query
export default function ShowPosts() {
  // custom hooks for api calls using queries and mutations
  const { data } = useApiQuery<Post[]>({ model: 'post', command: 'read' }); 
  const { mutate: deletePost } = useApiMutation<Post>({
    model: 'post',
    command: 'delete',
  });

  return (
    <div>
      {data?.map((post) => (
        <PostListItem key={post.id} {...{ post, deletePost }} />
      ))}
    </div>
  );
}

[TkDodo]

we have window checks for SSR purposes, so there shouldn't be any errors like that. I can take a closer look if you can provide a sandbox that shows that issue.

[adamhp]

I tried to set one up but couldn't reproduce. I'm guessing it is something in the library calls within the actual query function I'm using. I'm actually using NextJS + Tauri to experiment with native apps, and so I'm calling the Tauri library "invoke". The errors were coming from React Query initially but maybe just not propagating from the underlying lib or otherwise a red herring.

TLDR, couldn't reproduce with just react query and nextjs, so likely not an issue here.