useSWRInfinite import error

[DavisAtHome]

swr-openapi version

5.4.2

Description

We have a nextjs project that makes use of openapi-typescript and have had no problems with any of the generated fetch client code. However, when looking into using swr-openapi, we are running into the following issue:

 ⨯ ./node_modules/.pnpm/swr-openapi@5.4.2_openapi-fetch@0.15.0_openapi-typescript@7.10.0_typescript@5.6.3__react@19.1_khfijzhx3owgfkttofaowdvwk4/node_modules/swr-openapi/dist/index.mjs
Attempted import error: 'swr/infinite' does not contain a default export (imported as 'useSWRInfinite').

Reproduction

I tried following the provided guide and ended up with the error output when trying to run the site via next dev

client code

import createClient from "openapi-fetch";
import type { paths } from "./schema";
import {
  createQueryHook,
} from "swr-openapi";

const client = createClient<paths>({ baseUrl: url });
export const useQuery = createQueryHook(client, "prefix");

component code

export const Component = () => {
  ...
  const { data, error, isLoading, isValidating, mutate } = useQuery(
    "/endpoint",
    {
      queries: {
        path: {
          values
        },
      },
    },
  );
  ...
}

tsconfig includes the recommended settings

"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,

Expected result

The syntax used for the import of useSWRInfinite is fixed.

Extra

• I’m willing to open a PR (see CONTRIBUTING.md)

[JohnsonMao]

I had the same issue! The fix is to create a separate file with 'use client' directive:

// client-hooks.ts:
'use client';

import {
  createQueryHook,
  createImmutableHook,
  createInfiniteHook,
  createMutateHook,
} from 'swr-openapi';

import { client, PREFIX } from './client';

export const useQuery = createQueryHook(client, PREFIX);
export const useImmutable = createImmutableHook(client, PREFIX);
export const useInfinite = createInfiniteHook(client, PREFIX);
export const useMutate = createMutateHook(client, PREFIX);

// client.ts
import createClient from 'openapi-fetch';

import type { paths } from './openapi-types';

export const PREFIX = 'your-prefix' as const;

export const client = createClient<paths>({
  baseUrl: 'https://your-api-domain',
});

Then import from this file in your components. The 'use client' directive prevents the import error in Next.js Server Components.

[DavisAtHome]

@JohnsonMao Worked like a charm! Thank you so much!