react-query#QueryClient TypeScript Examples

ApiClientContextController = ({ children }: ApiClientControllerProps) => {
  const { queryFn, mutationFn, infiniteQueryFn } = useAxiosStrategy();
  /** example of usage of different strategy **/
  // const { queryFn, mutationFn, infiniteQueryFn } = useKyStrategy();

  const queryClient = useMemo(() => {
    return new QueryClient({
      defaultOptions: {
        queries: {
          queryFn: queryFn(),
        },
      },
    });
  }, [queryFn]);

  const ctxValue: ApiClientContextValue = useMemo(
    () => ({
      queryFn,
      mutationFn,
      infiniteQueryFn,
    }),
    [queryFn, mutationFn, infiniteQueryFn],
  );

  return (
    <ApiClientContext.Provider value={ctxValue}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </ApiClientContext.Provider>
  );
}

queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 60000),
      retry: false,
      retryOnMount: false,
      refetchOnMount: false,
      refetchOnWindowFocus: true,
      staleTime: 5000,
      cacheTime: 30000,
    },
  },
})

renderComponent = (bootData = defaultBootData): RenderResult => {
  const queryClient = new QueryClient();
  const app = 'extension';
  mocked(getBootData).mockResolvedValue(getBootMock(bootData));
  return render(
    <QueryClientProvider client={queryClient}>
      <BootDataProvider app={app} getRedirectUri={jest.fn()}>
        <ShortcutLinks />
      </BootDataProvider>
    </QueryClientProvider>,
  );
}

queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      refetchInterval: false,
      refetchIntervalInBackground: true,
      refetchOnWindowFocus: false,
      refetchOnReconnect: false,
    },
  },
})

queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 0,
      suspense: true,
      // useErrorBoundary: true,
    },
    mutations: {
      retry: 0,
      // useErrorBoundary: true,
    },
  },
})

export async function prefetchRecurringDonationById(
  client: QueryClient,
  id: string,
  token?: string,
) {
  await client.prefetchQuery<RecurringDonationResponse>(
    endpoints.recurringDonation.getRecurringDonation(id).url,
    authQueryFnFactory<RecurringDonationResponse>(token),
  )
}

export async function updateCurrentGuest(
  queryClient: QueryClient,
  guest: db.Guest
): Promise<db.Checkin> {
  // First we update the current guest in local DB (if it exists)
  const currentGuest = await getCurrentGuest()
  if (currentGuest) {
    await updateGuest(guest)
  }
  // The we fetch and update the last checkin
  const currentCheckin = await getLastNonProxyCheckin()
  currentCheckin.guest = guest
  const updatedCheckin = await updateCheckin(currentCheckin)
  // We also need to update the data in the API (only if the public key is available (downwards compability))
  if (updatedCheckin.k) {
    const csv = toCSV(updatedCheckin.guest)
    const encryptedData = encrypt(updatedCheckin.k, csv)
    await api.patchTicket({
      id: updatedCheckin.id,
      encryptedData: encryptedData,
    })
  }
  // Finally we need to refresh the checkins in order to display it in my-checkins
  queryClient.invalidateQueries('checkins')
  return updatedCheckin
}

queryClient = new QueryClient()

queryClient = new QueryClient()

queryClient = new QueryClient()

queryClient = new QueryClient()

queryClient = new QueryClient()

queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000,
    },
  },
})

queryClient = new QueryClient()

queryClient = new QueryClient()

queryClient = new QueryClient()

queryClient = new QueryClient()

queryClient = new QueryClient()

queryClient = new QueryClient()

function Root ({ store }: Props): React.ReactElement<Props> {
  const [theme, setTheme] = useState(() => createTheme(settings));
  const client = useRef(new QueryClient());

  useEffect((): void => {
    settings.on('change', (settings) => setTheme(createTheme(settings)));
  }, []);

  const args = getQueryStringArgs();

  if (args.elrondAddress) {
    let params = '?';

    Object.keys(args).forEach((e) => {
      params += e + '=' + args[e] + '&';
    });
    window.location.assign(`${window.location.origin}${window.location.pathname}${params}/#/bridge/elrondToCrust`);
    // window.location.reload();
  }

  return (
    <Suspense fallback='...'>
      <ThemeProvider theme={theme}>
        <Queue>
          <QueryClientProvider client={client.current}>
            <Api
              store={store}
              url={settings.apiUrl}
            >
              <BlockAuthors>
                <Events>
                  <HashRouter>
                    <WindowDimensions>
                      <Apps />
                    </WindowDimensions>
                  </HashRouter>
                </Events>
              </BlockAuthors>
            </Api>
          </QueryClientProvider>
        </Queue>
      </ThemeProvider>
    </Suspense>
  );
}

queryClient = new QueryClient()