@ventlio/tanstack-query 0.2.8 → 0.2.10

package/README.md

@@ -1,3 +1,33 @@
-# Ventlio/TanstackQuery
+# This is not a replacement for @tanstack/react-query
 
-## _Work on progress, we are building an HTTP request handler that uses tanstack-query_
+## WHY THIS PACKAGE?
+
+We have been working on a project using ReactJS and React-Native and we were happy with the React-Query package, now known as Tanstack-Query, which had made our lives easier by managing most of the state management features needed for enterprise software development. This had helped us focus on building functionalities easily without worrying about server state management.
+
+However, we still faced some challenges. For each project, we have to configure how Tanstack-Query would connect to the Backend API and manage GET, POST, PUT, and PATCH requests efficiently. One of the major challenges was handling dynamic queryKeys in Tanstack-Query. For example, when building a screen with pagination, useQuery will have re-call the queryFunction every time the key changed, which will load the current page data. This meant that the queryKey changed dynamically, and sometimes we needed to use the queryKey of the current page to perform certain tasks like updating a specific row in the view. This was always tedious.
+
+But we were not discouraged. We knew that every challenge presented an opportunity for growth and development. So, we set out to find a solution. This package would handle dynamic queryKeys in Tanstack-Query and solve other related problems. It made configuring Tanstack-Query to connect to the Backend API and managing GET, POST, PUT, and PATCH requests a breeze. It also solved the problem of dynamic queryKeys, making it much easier to update specific rows in the view.
+
+---
+
+## Install
+
+> You must install @tanstack/react-query and axios first to use this package
+
+```
+npm install @tanstack/react-query axios
+```
+
+After that install this package
+
+```
+$ npm install @ventlio/tanstack-query
+```
+
+```
+$ yarn add @ventlio/tanstack-query
+```
+
+## Getting Started
+
+Follow the below instructions to have the package running on your project

package/dist/index.js

@@ -5,7 +5,9 @@ var useQueryConfig = require('./config/useQueryConfig.js');
 var useQueryHeaders = require('./config/useQueryHeaders.js');
 var useQueryTimeout = require('./config/useQueryTimeout.js');
 var scrollToTop = require('./helpers/scrollToTop.js');
+var useKeyTrackerModel = require('./model/useKeyTrackerModel.js');
 var useQueryModel = require('./model/useQueryModel.js');
+var useRefetchQuery = require('./model/useRefetchQuery.js');
 var useDeleteRequest = require('./queries/useDeleteRequest.js');
 var useGetRequest = require('./queries/useGetRequest.js');
 var usePatchRequest = require('./queries/usePatchRequest.js');
@@ -23,7 +25,9 @@ exports.useQueryConfig = useQueryConfig.useQueryConfig;
 exports.useQueryHeaders = useQueryHeaders.useQueryHeaders;
 exports.useQueryTimeout = useQueryTimeout.useQueryTimeout;
 exports.scrollToTop = scrollToTop.scrollToTop;
+exports.useKeyTrackerModel = useKeyTrackerModel.useKeyTrackerModel;
 exports.useQueryModel = useQueryModel.useQueryModel;
+exports.useRefetchQuery = useRefetchQuery.useRefetchQuery;
 exports.useDeleteRequest = useDeleteRequest.useDeleteRequest;
 exports.useGetRequest = useGetRequest.useGetRequest;
 exports.usePatchRequest = usePatchRequest.usePatchRequest;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
-import { useState, useEffect, startTransition } from 'react';
+import { useState, useMemo, useEffect, startTransition } from 'react';
 import axios from 'axios';
 
 const useQueryConfig = () => {
@@ -53,11 +53,44 @@ const scrollToTop = () => {
     });
 };
 
+const useKeyTrackerModel = (keyTracker) => {
+    const queryClient = useQueryClient();
+    const [data, setData] = useState();
+    const [queryKey, setQueryKey] = useState();
+    const getQueryKey = (innerKeyTracker) => {
+        const key = queryClient.getQueryData([
+            innerKeyTracker ?? keyTracker,
+        ]);
+        setQueryKey(key);
+        return key;
+    };
+    const refetchQuery = (innerKeyTracker) => {
+        const key = getQueryKey(innerKeyTracker ?? keyTracker);
+        const queryData = queryClient.getQueryData(key);
+        setData(queryData);
+        return queryData;
+    };
+    return { refetchQuery, getQueryKey, queryKey, data };
+};
+
 const useQueryModel = (queryKey, filters) => {
     const queryClient = useQueryClient();
     return queryClient.getQueryData(queryKey, filters);
 };
 
+const useRefetchQuery = async (queryKey) => {
+    const queryClient = useQueryClient();
+    const refetchQuery = async (innerQueryKey) => {
+        await queryClient.refetchQueries({
+            queryKey,
+            exact: true,
+            type: 'active',
+        }, { throwOnError: true, cancelRefetch: true });
+        return queryClient.getQueriesData(innerQueryKey ?? queryKey);
+    };
+    return { refetchQuery };
+};
+
 const axiosInstance = ({ baseURL, timeout, headers, }) => {
     return axios.create({
         baseURL,
@@ -189,11 +222,14 @@ const useDeleteRequest = () => {
     return { destroy, ...query };
 };
 
-const useGetRequest = ({ path, load = false, queryOptions, }) => {
+const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
     const [requestPath, updatePath] = useState(path);
     const [options, setOptions] = useState(queryOptions);
     const [page, setPage] = useState(1);
     const { headers, baseURL, timeout } = useQueryConfig();
+    let queryClient = useQueryClient();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    queryClient = useMemo(() => queryClient, []);
     const sendRequest = async (res, rej) => {
         const postResponse = await makeRequest({
             path: requestPath,
@@ -219,6 +255,11 @@ const useGetRequest = ({ path, load = false, queryOptions, }) => {
             updatePath(path);
         }
     }, [path]);
+    useEffect(() => {
+        if (keyTracker) {
+            queryClient.setQueryData([keyTracker], [requestPath, {}]);
+        }
+    }, [keyTracker, requestPath, queryClient]);
     const nextPage = () => {
         if (query.data?.data.pagination) {
             const pagination = query.data.data.pagination;
@@ -350,5 +391,5 @@ const usePostRequest = ({ path, isFormData = false, }) => {
     return { post, ...mutation };
 };
 
-export { ContentType, HttpMethod, axiosInstance, buildFormData, errorTransformer, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useGetRequest, usePatchRequest, usePostRequest, useQueryBaseURL, useQueryConfig, useQueryHeaders, useQueryModel, useQueryTimeout };
+export { ContentType, HttpMethod, axiosInstance, buildFormData, errorTransformer, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useGetRequest, useKeyTrackerModel, usePatchRequest, usePostRequest, useQueryBaseURL, useQueryConfig, useQueryHeaders, useQueryModel, useQueryTimeout, useRefetchQuery };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/model/index.d.ts

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

package/dist/model/useKeyTrackerModel.d.ts

@@ -0,0 +1,6 @@
+export declare const useKeyTrackerModel: <T>(keyTracker: string) => {
+    refetchQuery: (innerKeyTracker?: string) => T | undefined;
+    getQueryKey: (innerKeyTracker?: string) => any[] | undefined;
+    queryKey: any[] | undefined;
+    data: T | undefined;
+};

package/dist/model/useKeyTrackerModel.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var reactQuery = require('@tanstack/react-query');
+var react = require('react');
+
+const useKeyTrackerModel = (keyTracker) => {
+    const queryClient = reactQuery.useQueryClient();
+    const [data, setData] = react.useState();
+    const [queryKey, setQueryKey] = react.useState();
+    const getQueryKey = (innerKeyTracker) => {
+        const key = queryClient.getQueryData([
+            innerKeyTracker ?? keyTracker,
+        ]);
+        setQueryKey(key);
+        return key;
+    };
+    const refetchQuery = (innerKeyTracker) => {
+        const key = getQueryKey(innerKeyTracker ?? keyTracker);
+        const queryData = queryClient.getQueryData(key);
+        setData(queryData);
+        return queryData;
+    };
+    return { refetchQuery, getQueryKey, queryKey, data };
+};
+
+exports.useKeyTrackerModel = useKeyTrackerModel;
+//# sourceMappingURL=useKeyTrackerModel.js.map

package/dist/model/useKeyTrackerModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyTrackerModel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/model/useRefetchQuery.d.ts

@@ -0,0 +1,3 @@
+export declare const useRefetchQuery: (queryKey: any[]) => Promise<{
+    refetchQuery: <T>(innerQueryKey?: any[]) => Promise<[import("@tanstack/react-query").QueryKey, T | undefined][]>;
+}>;

package/dist/model/useRefetchQuery.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var reactQuery = require('@tanstack/react-query');
+
+const useRefetchQuery = async (queryKey) => {
+    const queryClient = reactQuery.useQueryClient();
+    const refetchQuery = async (innerQueryKey) => {
+        await queryClient.refetchQueries({
+            queryKey,
+            exact: true,
+            type: 'active',
+        }, { throwOnError: true, cancelRefetch: true });
+        return queryClient.getQueriesData(innerQueryKey ?? queryKey);
+    };
+    return { refetchQuery };
+};
+
+exports.useRefetchQuery = useRefetchQuery;
+//# sourceMappingURL=useRefetchQuery.js.map

package/dist/model/useRefetchQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRefetchQuery.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/queries/useGetRequest.d.ts

@@ -2,10 +2,11 @@
 import type { UseQueryOptions } from '@tanstack/react-query';
 import type { IRequestError, IRequestSuccess } from '../request';
 import type { TanstackQueryOption } from './queries.interface';
-export declare const useGetRequest: <TResponse extends Record<string, any>>({ path, load, queryOptions, }: {
+export declare const useGetRequest: <TResponse extends Record<string, any>>({ path, load, queryOptions, keyTracker, }: {
     path: string;
     load?: boolean | undefined;
     queryOptions?: TanstackQueryOption<TResponse> | undefined;
+    keyTracker?: string | undefined;
 }) => {
     updatePath: import("react").Dispatch<import("react").SetStateAction<string>>;
     nextPage: () => void;

package/dist/queries/useGetRequest.js

@@ -7,11 +7,14 @@ require('axios');
 var makeRequest = require('../request/make-request.js');
 require('../request/request.enum.js');
 
-const useGetRequest = ({ path, load = false, queryOptions, }) => {
+const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
     const [requestPath, updatePath] = react.useState(path);
     const [options, setOptions] = react.useState(queryOptions);
     const [page, setPage] = react.useState(1);
     const { headers, baseURL, timeout } = useQueryConfig.useQueryConfig();
+    let queryClient = reactQuery.useQueryClient();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    queryClient = react.useMemo(() => queryClient, []);
     const sendRequest = async (res, rej) => {
         const postResponse = await makeRequest.makeRequest({
             path: requestPath,
@@ -37,6 +40,11 @@ const useGetRequest = ({ path, load = false, queryOptions, }) => {
             updatePath(path);
         }
     }, [path]);
+    react.useEffect(() => {
+        if (keyTracker) {
+            queryClient.setQueryData([keyTracker], [requestPath, {}]);
+        }
+    }, [keyTracker, requestPath, queryClient]);
     const nextPage = () => {
         if (query.data?.data.pagination) {
             const pagination = query.data.data.pagination;

package/dist/queries/useGetRequest.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGetRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"useGetRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ventlio/tanstack-query",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "license": "MIT",
   "main": "dist/index.js",
   "contributors": [