docs: add useInfiniteQuery docs

Author: jungwoo3490

docs/openapi-react-query/use-infinite-query.md

@@ -0,0 +1,107 @@
+---
+title: useInfiniteQuery
+---
+# {{ $frontmatter.title }}
+
+The `useInfiniteQuery` method allows you to use the original [useInfiniteQuery](https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery) from React Query with OpenAPI typed endpoints.
+
+- The result is the same as the original function.
+- The `queryKey` is `[method, path, params]`.
+- `data` and `error` are fully typed based on your OpenAPI schema.
+- Pagination is automatically handled using the page parameter and a pre-configured `getNextPageParam` function.
+
+::: tip
+You can find more information about `useInfiniteQuery` on the [@tanstack/react-query documentation](https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery).
+:::
+
+## Example
+
+::: code-group
+
+```tsx [src/app.tsx]
+import { $api } from "./api";
+
+export const App = () => {
+  const {
+    data,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    isFetchingNextPage,
+    isLoading,
+    isError,
+  } = $api.useInfiniteQuery("get", "/users", {
+    params: {
+      query: { limit: 10 },
+    },
+  });
+
+  if (isLoading) return <p>Loading...</p>;
+  if (isError) return <p>Error: {(error as Error).message}</p>;
+
+  return (
+    <div>
+      {data.pages.map((group, i) => (
+        <React.Fragment key={i}>
+          {group.users.map(user => (
+            <p key={user.id}>{user.name}</p>
+          ))}
+        </React.Fragment>
+      ))}
+      <div>
+        <button
+          onClick={() => fetchNextPage()}
+          disabled={!hasNextPage || isFetchingNextPage}
+        >
+          {isFetchingNextPage
+            ? 'Loading more...'
+            : hasNextPage
+            ? 'Load More'
+            : 'Nothing more to load'}
+        </button>
+      </div>
+      <div>{isFetching && !isFetchingNextPage ? 'Fetching...' : null}</div>
+    </div>
+  );
+};
+```
+
+```ts [src/api.ts]
+import createFetchClient from "openapi-fetch";
+import createClient from "openapi-react-query";
+import type { paths } from "./my-openapi-3-schema"; // generated by openapi-typescript
+
+const fetchClient = createFetchClient<paths>({
+  baseUrl: "https://myapi.dev/v1/",
+});
+export const $api = createClient(fetchClient);
+```
+
+:::
+
+## Api
+
+```tsx
+const query = $api.useInfiniteQuery(method, path, options, queryOptions, queryClient);
+```
+
+**Arguments**
+
+- `method` **(required)**
+  - The HTTP method to use for the request.
+   - The method is used as key. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information.
+- `path` **(required)**
+  - The pathname to use for the request.
+  - Must be an available path for the given method in your schema.
+  - The pathname is used as key. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information.
+- `options`
+  - The fetch options to use for the request.
+  - Only required if the OpenAPI schema requires parameters.
+  - The options `params` are used as key. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information.
+- `queryOptions`
+  - The original `useInfiniteQuery` options.
+  - [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery)
+- `queryClient`
+  - The original `queryClient` option.
+  - [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery)