createAPIClient(...)

Qraft CLI generates a helper function createAPIClient(...), which creates a Qraft API client with the necessary context for React Hooks.

import { createAPIClient } from './api'

const qraft = createAPIClient({
  context,
})

Arguments

1. options?: QraftClientOptions - Optional options to be used by the Qraft API client
   • options.context?: Context<QraftContextValue> - Optional custom Context to be used by Qraft Hooks. If not provided, a default QraftContext will be used. The custom Context must be used when multiple Qraft API clients for the multiple OpenAPIs are used in the same application. In case if you are going to publish your API client as a library, it's highly recommended to use a custom Context.

Returns

• qraft - The Qraft API client with the necessary context for Qraft Hooks. It contains all the methods to interact with the API grouped in services.

Examples

Basic

src/fetch-queries.ts

import { requestFn } from '@openapi-qraft/react';
import { createAPIClient } from './api';

import { QueryClient, dehydrate } from '@tanstack/react-query';

const queryClient = new QueryClient();

// ⬇︎ Create a Qraft API client
const qraft = createAPIClient()

const parameters = {
  path: { petId: 1 },
};

// ⬇︎ Fetch the `getPetById` query with the `queryClient`
const pet = await qraft.pet.getPetById.fetchQuery(
  {
    parameters,
    requestFn: requestFn,
    baseUrl: 'https://api.sandbox.monite.com/v1',
  },
  queryClient
);

console.log(pet.name); // `pet` is the result of the `getPetById` request

dehydrate(queryClient); // Dehydrate the `queryClient` to be used for SSR

Custom context

With the options.context, you can specify a custom Context to be used by the Qraft API client. It's useful if you want to publish your API client as an NPM library. In this case, you must provide a custom Context instead of QraftContext, to prevent conflicts with other API clients in the same application. The client can use the standard QueryClient from the <QueryClientProvider/> of TanStack, or even <QraftContext/> from client's application. That's why the queryClient must be also provided to the custom Qraft Context value.

src/CustomAPIProvider.ts

src/CustomAPIProvider.ts

import { QraftContextValue, requestFn } from '@openapi-qraft/react';
import { createAPIClient } from './api';

import React, { createContext, useMemo, useEffect, useContext } from "react";
import { QueryClient } from '@tanstack/react-query'

// ⬇︎ Create a custom Context with the `QraftContextValue` type
const CustomQraftContext = createContext<QraftContextValue>(undefined);

export function createCustomAPIClient() {
  // ⬇︎ Create a Qraft API client with the custom Context
  return createAPIClient({ context: CustomQraftContext });
}

export function CustomAPIProvider({ children }: { children: React.ReactNode }) {
  const queryClient = useMemo(() => new QueryClient(), []);

  useEffect(() => {
    // ⬇︎ Mount and unmount the `queryClient`,
    //   so you will NOT be needed to use `<QueryClientProvider/>` from TanStack
    queryClient.mount();
    return () => {
      queryClient.unmount();
    };
  }, [queryClient]);

  return (
    <CustomQraftContext.Provider
      value={{
        queryClient, // ⬅︎ specify the `queryClient` to be used by the Hooks
        requestFn,
        baseUrl: 'https://api.sandbox.monite.com/v1',
      }}
    >
      {children}
    </CustomQraftContext.Provider>
  );
}

src/App.tsx

src/App.tsx

import { createCustomAPIClient, CustomAPIProvider } from './CustomAPIProvider'

const qraft = createCustomAPIClient()

export default function App() {
  // ⬇︎ with the `CustomAPIProvider` you don't need to use`<QueryClientProvider />` from TanStack
  // because the `queryClient` is already provided by the `<CustomAPIProvider/>`
  return (
    <CustomAPIProvider>
      <ExampleComponent />
    </CustomAPIProvider>
  )
}

function ExampleComponent() {
  const { data: pet } = qraft.pet.getPetById.useQuery({ parameters: { petId: 1 } })

  return (
    <div>
      {pet && <h2>{pet.name}</h2>}
    </div>
  )
}

tip

You can call the createAPIClient(...) function multiple times, inside the Components, server side code, or create an external file to export the qraft object. All methods are valid ✔︎ as long as you provide the same options.