@ventlio/tanstack-query 0.2.6 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ventlio/tanstack-query",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "license": "MIT",
   "main": "dist/index.js",
   "repository": {

package/src/model/index.ts

@@ -1 +1,3 @@
+export * from './useKeyTrackerModel';
 export * from './useQueryModel';
+export * from './useRefetchQuery';

package/src/model/useKeyTrackerModel.ts

@@ -0,0 +1,28 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+
+export const useKeyTrackerModel = <T>(keyTracker: string) => {
+  const queryClient = useQueryClient();
+  const [data, setData] = useState<T>();
+  const [queryKey, setQueryKey] = useState<any[] | undefined>();
+
+  const getQueryKey = (innerKeyTracker?: string) => {
+    const key: any[] | undefined = queryClient.getQueryData([
+      innerKeyTracker ?? keyTracker,
+    ]);
+    setQueryKey(key);
+    return key;
+  };
+
+  const refetchQuery = (innerKeyTracker?: string) => {
+    const key: any = getQueryKey(innerKeyTracker ?? keyTracker);
+
+    const queryData = queryClient.getQueryData<T>(key);
+
+    setData(queryData);
+
+    return queryData;
+  };
+
+  return { refetchQuery, getQueryKey, queryKey, data };
+};

package/src/model/useRefetchQuery.ts

@@ -0,0 +1,20 @@
+import { useQueryClient } from '@tanstack/react-query';
+
+export const useRefetchQuery = async (queryKey: any[]) => {
+  const queryClient = useQueryClient();
+
+  const refetchQuery = async <T>(innerQueryKey?: any[]) => {
+    await queryClient.refetchQueries(
+      {
+        queryKey,
+        exact: true,
+        type: 'active',
+      },
+      { throwOnError: true, cancelRefetch: true }
+    );
+
+    return queryClient.getQueriesData<T>(innerQueryKey ?? queryKey);
+  };
+
+  return { refetchQuery };
+};

package/src/queries/useGetRequest.ts

@@ -1,6 +1,6 @@
 import type { UseQueryOptions } from '@tanstack/react-query';
-import { useQuery } from '@tanstack/react-query';
-import { startTransition, useEffect, useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { startTransition, useEffect, useMemo, useState } from 'react';
 import { useQueryConfig } from '../config';
 import type { IRequestError, IRequestSuccess } from '../request';
 import { makeRequest } from '../request';
@@ -10,10 +10,12 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
   path,
   load = false,
   queryOptions,
+  keyTracker,
 }: {
   path: string;
   load?: boolean;
   queryOptions?: TanstackQueryOption<TResponse>;
+  keyTracker?: string;
 }) => {
   const [requestPath, updatePath] = useState<string>(path);
   const [options, setOptions] = useState<any>(queryOptions);
@@ -21,6 +23,10 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
 
   const { headers, baseURL, timeout } = useQueryConfig();
 
+  let queryClient = useQueryClient();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  queryClient = useMemo(() => queryClient, []);
+
   const sendRequest = async (
     res: (
       value:
@@ -61,6 +67,12 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
     }
   }, [path]);
 
+  useEffect(() => {
+    if (keyTracker) {
+      queryClient.setQueryData([keyTracker], [requestPath, {}]);
+    }
+  }, [keyTracker, requestPath, queryClient]);
+
   const nextPage = () => {
     if (query.data?.data.pagination) {
       const pagination: IPagination = query.data.data.pagination;