feat(useSuspenseQuery): Add useSuspenseQuery generation

[seriouslag]

The PR generates suspense query hooks. Addresses #45

Now instead of only having one generated index.ts, we now have 4 files.

• common.ts - exports common types and variables for hooks.
• queries.ts - exports the standard query hooks
• suspense.ts - exports the new suspense query hooks
• index.ts - exports all from common.ts and queries.ts - keeps the API as it is now

To use the standard queries (same as is is now):

import {
  usePetServiceFindPetsByStatus,
} from "../openapi/queries";

To use the new suspense queries:

import {
  usePetServiceFindPetsByStatusSuspense,
} from "../openapi/queries/suspense";

Full Example:

import { useDefaultClientFindPetsSuspense } from './openapi/queries/suspense';

function ChildComponent() {
  const { data } = useDefaultClientFindPetsSuspense({ tags: [], limit: 10 })

  return (
    <ul>
    {
      data?.map((pet, index) => (
         <li key={pet.id}>{pet.name}</li>
      ))
    }
    </ul>
  )
}

function ParentComponent() {
  return (
    <>
      <Suspense fallback={<>loading...</>}>
        <ChildComponent />
      </Suspense>
    </>
  );
}

[7nohe]

The usage example should be simple. You just need to wrap the component that executesuseDefaultClientFindPetsSuspense with <Suspense>.

function ChildComponent() {
  const { data } = useDefaultClientFindPetsSuspense({ tags: [], limit: 10 })

  return (
    <ul>
    {
      data?.map((pet, index) => (
         <li key={pet.id}>{pet.name}</li>
      ))
    }
    </ul>
  )
}

function ParentComponent() {
  return (
    <>
      <Suspense fallback={<>loading...</>}>
        <ChildComponent />
      </Suspense>
    </>
  );
}

I agree with separating files related to Suspense queries from a maintainability perspective. I'd like to give it a try when I have some time.

[seriouslag]

I have pushed a new commit which breaks up the file generation.

instead of only having one index.ts, we now have 4 files.

• common.ts - exports common types and variables for hooks.
• queries.ts - exports the standard query hooks
• suspense.ts - exports the new suspense query hooks
• index.ts - exports all from common.ts and queries.ts - keeps the API as it is now

suspense imports will have to imported through the suspense file ./openapi/queries/suspense

@7nohe

[7nohe]

@seriouslag This is very cool. And it feels like after merging #50 , the next release could be published as v1. Thanks!