Function RQWrapper

  • RQWrapper(props): Element

  • This component wraps your application and provides the necessary context for the hooks to work.

    Parameters

    • props: {
          apiAuthorization?: (() => string);
          apiClient?: ApiClient;
          apiEnsureTrailingSlash?: boolean;
          apiHeaders?: (() => undefined | Headers);
          apiOnError?: ((error: CustomError, args: Omit<ApiProps, "onSuccess" | "onError" | "context">, context: any) => void);
          apiOnSuccess?: ((data: any, args: Omit<ApiProps, "onSuccess" | "onError" | "context">, context: any) => void);
          apiUrl: string;
          children: ReactNode;
          config?: QueryClientConfig;
          devToolsOptions?: DevtoolsOptions;
          isDevTools?: boolean;
          toast?: {
              CustomContent?: ((toast: Toast) => Element);
              CustomUndoContent?: ToastCustomUndoContent;
              globalProps?: ToastProps;
          };
      }
      • OptionalapiAuthorization?: (() => string)

        A function to get the authorization token for API requests. If not provided, or if the function returns an empty string, no authorization token will be used.

          • (): string

          • Returns string

      • OptionalapiClient?: ApiClient

        The function to use for making API requests. Defaults to fetcher from react-query-manager.

      • OptionalapiEnsureTrailingSlash?: boolean

        If true, the returned URL will have a trailing slash.

      • OptionalapiHeaders?: (() => undefined | Headers)

        A function to get the headers for API requests. If not provided, or if the function returns an empty object, no headers will be used.

      • OptionalapiOnError?: ((error: CustomError, args: Omit<ApiProps, "onSuccess" | "onError" | "context">, context: any) => void)

        A callback to run when an API request fails. If not provided, the default behavior will be used.

          • (error, args, context): void

          • Parameters

            Returns void

      • OptionalapiOnSuccess?: ((data: any, args: Omit<ApiProps, "onSuccess" | "onError" | "context">, context: any) => void)

        A callback to run when an API request is successful. If not provided, the default behavior will be used.

          • (data, args, context): void

          • Parameters

            • data: any
            • args: Omit<ApiProps, "onSuccess" | "onError" | "context">
            • context: any

            Returns void

      • apiUrl: string

        The base URL for all API requests.

      • children: ReactNode

        The children components to render.

      • Optionalconfig?: QueryClientConfig

        The configuration for the underlying QueryClient instance.

      • OptionaldevToolsOptions?: DevtoolsOptions

        Options to pass to the React Query devtools.

      • OptionalisDevTools?: boolean

        Whether to render the React Query devtools. Defaults to false.

      • Optionaltoast?: {
            CustomContent?: ((toast: Toast) => Element);
            CustomUndoContent?: ToastCustomUndoContent;
            globalProps?: ToastProps;
        }

        Options for the toast utility from react-hot-toast. See the documentation for more details.

        The wrapper property can be used to customize the toast component.

        The globalProps property can be used to customize the default props for the toast component.

        The ToastCustomUndoContent property can be used to customize the content of the toast when the user clicks the "UNDO" button.

        • OptionalCustomContent?: ((toast: Toast) => Element)
            • (toast): Element

            • Parameters

              • toast: Toast

              Returns Element

        • OptionalCustomUndoContent?: ToastCustomUndoContent
        • OptionalglobalProps?: ToastProps

    Returns Element

    Example

    import { RQWrapper, ToastCustomContent, ToastBar } from 'react-query-manager';

    const ToastWrapper: ToastCustomContent = (props) => {
     return <ToastBar toast={props} position={props.position} />;
    };

    <RQWrapper
     isDevTools
      devToolsOptions={{
        buttonPosition: 'bottom-left',
      }}
      apiUrl="https://jsonplaceholder.typicode.com"
      apiAuthorization={() => 'Bearer 12345'}
      apiOnSuccess={(...args) => {
        console.log('apiOnSuccess: ', args);
      }}
      apiOnError={(...args) => {
        console.log('apiOnError: ', args);
      }}
      toast={{
        globalProps: {
          position: 'bottom-center',
        },
        wrapper: ToastWrapper,
      }}
    >
      <List />
    </RQWrapper>

Settings

Member Visibility