Skip to main content

Prerequirements

Before using MobX Queries and Mutations you have to create the instance of TanStack's Query QueryClient.
You can achieve this with:

1. Create MobxQueryClient instance​

import { MobxQueryClient } from 'mobx-tanstack-query';

export const queryClient = new MobxQueryClient();

2. Create QueryClient​

You can use QueryClient instance from TanStack Query core package.
But you need to mount() that instance of QueryClient, because it enables all subscriptions for online\offline and window focus\blur.

import { QueryClient } from '@tanstack/query-core';

export const queryClient = new QueryClient();
queryClient.mount();

Config recommendations​

import { hashKey } from '@tanstack/query-core';
import { MobxQueryClient } from 'mobx-tanstack-query';

const MAX_FAILURE_COUNT = 3;

export const queryClient = new MobxQueryClient({
  defaultOptions: {
    queries: {
      throwOnError: true,
      queryKeyHashFn: hashKey,
      refetchOnWindowFocus: 'always',
      refetchOnReconnect: 'always',
      staleTime: 5 * 60 * 1000, // 5 mins
      retry: (failureCount, error) => {
        if ('status' in error && Number(error.status) >= 500) {
          return MAX_FAILURE_COUNT - failureCount > 0; // max attempts only for 500+ status codes
        }
        return false;
      },
    },
    mutations: {
      throwOnError: true,
    },
  },
});