@ventlio/tanstack-query 0.2.10 → 0.2.11

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?
 
@@ -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.11",
   "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