QraftContext

QraftContext is the default provider for the Qraft API client used to make requests using Hooks in React.

<QraftContext.Provider
  value={{
    requestFn,
    baseUrl,
    queryClient,
  }}
  children={children}
/>

Context Value

• requestFn: requestFn(requestSchema, requestInfo) => Promise<T> - Required function used to make requests
• baseUrl: string - Required base URL of the API to be used by requestFn
• queryClient?: QueryClient - Optional QueryClient 🌴 to be used in Qraft Hooks. If not provided, useQueryClient() 🌴 result will be used as a default QueryClient.

Examples

Default requestFn

src/APIClientProvider.tsx

import React from 'react';
import { QraftContext, requestFn } from '@openapi-qraft/react';

export default function ApplicationProviders({ children }: { children: React.ReactNode }) {
  return (
    <QraftContext.Provider
      value={{
        requestFn, // the request function to use, could be fully customized
        baseUrl: 'https://petstore3.swagger.io/api/v3', // the base URL of the API
      }}
    >
      {children}
    </QraftContext.Provider>
  );
}

Custom Authorization

In this example, we are using a custom requestFn to add an Authorization header to the request. In this way, you can customize the requestFn to add any headers, credentials, cache, etc.

src/APIClientSecureProvider.tsx

import React from 'react';
import { QraftContext, requestFn } from '@openapi-qraft/react';
import { fetchToken } from './lib/fetchToken';

export default function ApplicationSecureProviders({ children }: { children: React.ReactNode }) {
  return (
    <QraftContext.Provider
      value={{
        // ⬇︎ the `requestFn` will be called for each request
        requestFn: async (requestSchema, requestInfo) => {
          // ⬇︎ make any async request inside the `requestFn`
          const token = await fetchToken();

          return requestFn(requestSchema, {
            // ⬇︎ feel free to customize the requestInfo object
            //    with the headers, credentials, cache, etc.
            headers: {
              Authorization: `Bearer ${token}`,
            },
            ...requestInfo,
          });
        },
        baseUrl: 'https://api.sandbox.monite.com/v1', // the base URL of the API
      }}
    >
      {children}
    </QraftContext.Provider>
  );
}

Multiple APIs

In this example, we are using multiple custom Qraft Contexts to create multiple API clients with different baseUrl and QueryClient instances.

src/QraftProviders.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 Contexts with the `QraftContextValue` type
export const PetStoreQraftContext = createContext<QraftContextValue>(undefined);
export const MoniteQraftContext = createContext<QraftContextValue>(undefined);

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

export function createMoniteAPIClient() {
  return createAPIClient({ context: MoniteQraftContext });
}

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

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

  return (
    <PetStoreQraftContext.Provider
      value={{
        // ⬇︎ specify the `queryClient` to be used by the Hooks
        //   created with the `createPetStoreAPIClient()`
        queryClient: petStoreQueryClient,
        requestFn,
        baseUrl: 'https://petstore3.swagger.io/api/v3',
      }}
    >
        <MoniteQraftContext.Provider
          value={{
            // ⬇︎ specify the `queryClient` to be used by the Hook
            //   created with the `createMoniteAPIClient()`
            queryClient,
            requestFn,
            baseUrl: 'https://api.sandbox.monite.com/v1',
          }}
        >
          {children}
        </MoniteQraftContext.Provider>
    </PetStoreQraftContext.Provider>
  );
}