@ventlio/tanstack-query 0.2.10 → 0.2.12

package/README.md

@@ -1,4 +1,4 @@
-# This is not a replacement for @tanstack/react-query
+### This is not a replacement for @tanstack/react-query
 
 ## WHY THIS PACKAGE?
 
@@ -6,7 +6,7 @@ We have been working on a project using ReactJS and React-Native and we were hap
 
 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.
+But we were not discouraged. So, we set out to find a solution which led to the development of this package. 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.
 
 ---
 
@@ -31,3 +31,130 @@ $ yarn add @ventlio/tanstack-query
 ## Getting Started
 
 Follow the below instructions to have the package running on your project
+
+```js
+import { QueryClient } from '@tanstack/react-query';
+import { TanstackQueryConfig } from '@ventlio/tanstack-query';
+
+// Global queryClient
+const queryClient = new QueryClient();
+
+// do this before adding the queryClient to QueryClientProvider
+queryClient.setQueryData <
+  TanstackQueryConfig >
+  (['config'],
+  {
+    baseURL: 'https://pokeapi.co/api/v2',
+    timeout: 10000,
+    headers: {
+      Authorization: `Bearer Hello`,
+    },
+  });
+```
+
+You can now use it in a QueryClientProvider
+
+```jsx
+import { QueryClientProvider } from '@tanstack/react-query';
+import { queryClient } from './queryClient';
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <HomePage />
+      <About />
+    </QueryClientProvider>
+  );
+}
+```
+
+Updating the configurations inside a component
+
+```jsx
+import {
+  useQueryBaseURL,
+  useQueryHeaders,
+  useQueryTimeout,
+} from '@ventlio/tanstack-query';
+
+function LoginPage() {
+  const { baseURL, setQueryBaseUrl } = useQueryBaseURL();
+  const { headers, setQueryHeaders } = useQueryHeaders();
+  const { timeout, setQueryTimeout } = useQueryTimeout();
+
+  useEffect(() => {
+    // after user has logged in successfully set the authorization header token
+    headers.Authorization = 'Bearer token'; // this will be used for subsequent queries
+    setQueryHeaders(headers);
+  }, []);
+
+  return <>{/** codes */}</>;
+}
+```
+
+## Hooks
+
+- `useQueryBaseURL()`
+  return
+
+  - `baseURL: string`; the global baseURL
+  - `setBaseURL(url: string)`; update the global baseURL
+
+- `useQueryHeaders()`
+  return
+
+  - `headers: RawAxiosRequestHeaders`; the global request headers
+  - `setHeaders(headers: RawAxiosRequestHeaders)`; update the global request headers
+
+- `useGetRequest<T>(config: { path, load, queryOptions })`
+
+  - params
+    - config
+      - `path: string`: request path
+      - `load: boolean`: if true the request starts immediately otherwise it will wait until it is triggered to true, defaults to false
+      - `queryOptions: TanstackQueryOption<TResponse>`: query options
+      - `keyTracker`: query key tracker for dynamic queries
+
+- `usePostRequest<T>(config: { path, isFormData })`
+
+  - params
+    - config
+      - `path: string`: request path
+      - `isFormData: boolean`: set it to true if you want to upload file with the post request
+
+- `useDeleteRequest<T>()`
+
+  - params
+    - no params
+
+- `usePatchRequest<T>({ path })`
+  - params
+    - `path : string`: path to the request to be deleted
+
+## Examples
+
+Make fetch Request
+
+```jsx
+import { useGetRequest } from '@ventlio/tanstack-query';
+
+function PostPage() {
+  const { isLoading, data, isInitialLoading, get } = useGetRequest({
+    path: '/posts/1',
+    load: true,
+  });
+
+  if (isLoading || isInitialLoading || !data) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <div>
+      <h1> {data.data.title} </h1>
+      <article> {data.data.description} </article>
+    </div>
+  );
+}
+```
+
+## We welcome any contribution that will help the project

package/dist/index.mjs

@@ -321,7 +321,7 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
     };
 };
 
-const usePatchRequest = ({ path, }) => {
+const usePatchRequest = ({ path }) => {
     const { headers, baseURL, timeout } = useQueryConfig();
     // register post mutation
     const mutation = useMutation((postData) => new Promise((res, rej) => {

package/dist/queries/usePatchRequest.d.ts

@@ -1,8 +1,7 @@
 import type { MutateOptions } from '@tanstack/react-query';
 import type { IRequestError, IRequestSuccess } from '../request/request.interface';
-export declare const usePatchRequest: <TResponse>({ path, }: {
+export declare const usePatchRequest: <TResponse>({ path }: {
     path: string;
-    isFormData?: boolean | undefined;
 }) => {
     data: undefined;
     error: null;

package/dist/queries/usePatchRequest.js

@@ -7,7 +7,7 @@ var makeRequest = require('../request/make-request.js');
 var request_enum = require('../request/request.enum.js');
 var useQueryConfig = require('../config/useQueryConfig.js');
 
-const usePatchRequest = ({ path, }) => {
+const usePatchRequest = ({ path }) => {
     const { headers, baseURL, timeout } = useQueryConfig.useQueryConfig();
     // register post mutation
     const mutation = reactQuery.useMutation((postData) => new Promise((res, rej) => {

package/package.json

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

package/src/queries/usePatchRequest.ts

@@ -9,12 +9,7 @@ import type {
   IRequestSuccess,
 } from '../request/request.interface';
 
-export const usePatchRequest = <TResponse>({
-  path,
-}: {
-  path: string;
-  isFormData?: boolean;
-}) => {
+export const usePatchRequest = <TResponse>({ path }: { path: string }) => {
   const { headers, baseURL, timeout } = useQueryConfig();
 
   // register post mutation