required staleTime and better syntax (#105)

soundxyz · Jul 13, 2023 · b829779 · b829779
1 parent 5d692de
commit b829779
Show file tree

Hide file tree

Showing 6 changed files with 1,117 additions and 990 deletions.
diff --git a/.changeset/lovely-rivers-destroy.md b/.changeset/lovely-rivers-destroy.md
@@ -0,0 +1,5 @@
+---
+'@soundxyz/graphql-react-query': major
+---
+
+Make staleTime required option
diff --git a/.changeset/sweet-ligers-search.md b/.changeset/sweet-ligers-search.md
@@ -0,0 +1,5 @@
+---
+'@soundxyz/graphql-react-query': minor
+---
+
+staleTime and cacheTime accepts "ms" library string syntax
diff --git a/.changeset/sweet-pugs-compare.md b/.changeset/sweet-pugs-compare.md
@@ -0,0 +1,5 @@
+---
+'@soundxyz/graphql-react-query': major
+---
+
+Make ms, lodash-es, valtio and zod peer dependencies to prevent duplicate dependencies
diff --git a/packages/graphql-react-query/package.json b/packages/graphql-react-query/package.json
@@ -21,22 +21,27 @@
     "bob-tsm": "^1.1.2",
     "esbuild": "^0.17.11",
     "graphql": "^16.6.0",
+    "lodash-es": "^4.17.21",
+    "ms": "3.0.0-canary.1",
     "react": "^18.2.0",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "valtio": "^1.10.3",
+    "zod": "^3.21.4"
   },
   "peerDependencies": {
     "@soundxyz/gql-string": "workspace:^",
     "@tanstack/react-query": "^4.26.1",
     "@types/react": ">=17",
-    "react": ">=17"
+    "lodash-es": "^4.17.21",
+    "ms": "3.0.0-canary.1",
+    "react": ">=17",
+    "valtio": "^1.10.3",
+    "zod": "^3.21.4"
   },
   "publishConfig": {
     "directory": "dist"
   },
   "dependencies": {
-    "fast-deep-equal": "^3.1.3",
-    "lodash-es": "^4.17.21",
-    "valtio": "^1.10.3",
-    "zod": "^3.21.4"
+    "fast-deep-equal": "^3.1.3"
   }
 }
diff --git a/packages/graphql-react-query/src/client.ts b/packages/graphql-react-query/src/client.ts
@@ -1,7 +1,9 @@
 import orderBy from 'lodash-es/orderBy.js';
+import ms, { StringValue } from 'ms';
 import { createElement, ReactNode, useMemo, useState } from 'react';
-import { z } from 'zod';
 import { proxy } from 'valtio';
+import { z } from 'zod';
+
 import { gql, ResultOf, StringDocumentNode, VariablesOf } from '@soundxyz/gql-string';
 
 import {
@@ -396,6 +398,12 @@ export function GraphQLReactQueryClient<
     );
   }
 
+  type DynamicTimeProp = number | StringValue;
+
+  function getTimeProp(time: DynamicTimeProp) {
+    return typeof time === 'number' ? time : ms(time);
+  }
+
   function useQuery<
     Doc extends StringDocumentNode<any, any>,
     QueryData = ExecutionResultWithData<ResultOf<Doc>>,
@@ -406,21 +414,41 @@ export function GraphQLReactQueryClient<
       enabled = true,
       fetchOptions,
       filterQueryKey,
+      staleTime,
+      cacheTime,
       ...options
     }: (VariablesOf<Doc> extends Record<string, never>
-      ? UseQueryOptions<ExecutionResultWithData<ResultOf<Doc>>, Error, QueryData, QueryKey> & {
+      ? Omit<
+          UseQueryOptions<ExecutionResultWithData<ResultOf<Doc>>, Error, QueryData, QueryKey>,
+          'staleTime' | 'cacheTime'
+        > & {
           variables?: undefined;
         }
-      : UseQueryOptions<ExecutionResultWithData<ResultOf<Doc>>, Error, QueryData, QueryKey> & {
+      : Omit<
+          UseQueryOptions<ExecutionResultWithData<ResultOf<Doc>>, Error, QueryData, QueryKey>,
+          'staleTime' | 'cacheTime'
+        > & {
           variables: VariablesOf<Doc> | false;
-        }) & { fetchOptions?: Partial<RequestInit>; filterQueryKey?: unknown },
+        }) & {
+      fetchOptions?: Partial<RequestInit>;
+      filterQueryKey?: unknown;
+
+      /**
+       * The time in milliseconds after data is considered stale. If set to Infinity, the data will never be considered stale.
+       */
+      staleTime: DynamicTimeProp;
+
+      cacheTime?: DynamicTimeProp;
+    },
   ) {
     const result = useQueryReactQuery<ExecutionResultWithData<ResultOf<Doc>>, Error, QueryData>({
       queryFn: fetchOptions ? queryFnWithFetchOptions(fetchOptions) : defaultQueryFn,
       queryKey:
         filterQueryKey !== undefined ? [query, variables, filterQueryKey] : [query, variables],
       ...options,
       enabled: enabled && variables !== false,
+      staleTime: getTimeProp(staleTime),
+      cacheTime: cacheTime != null ? getTimeProp(cacheTime) : undefined,
     });
 
     const setQueryDataCallback = useStableCallback(
@@ -644,17 +672,28 @@ export function GraphQLReactQueryClient<
 
       onFetchCompleted,
 
+      staleTime,
+
+      cacheTime,
+
       enabled = true,
 
       ...options
     }: Omit<
       UseInfiniteQueryOptions<ExecutionResultWithData<ResultOf<Doc>>, Error>,
-      'queryKey' | 'queryFn'
+      'queryKey' | 'queryFn' | 'staleTime' | 'cacheTime'
     > &
       RequireAtLeastOne<{
         getNextPageParam?: StrictGetPageParam<ExecutionResultWithData<ResultOf<Doc>>>;
         getPreviousPageParam?: StrictGetPageParam<ExecutionResultWithData<ResultOf<Doc>>>;
       }> & {
+        /**
+         * The time in milliseconds after data is considered stale. If set to Infinity, the data will never be considered stale.
+         */
+        staleTime: DynamicTimeProp;
+
+        cacheTime?: DynamicTimeProp;
+
         variables:
           | false
           | (({ pageParam }: { pageParam: CursorPageParam | null }) => VariablesOf<Doc>);
@@ -704,6 +743,8 @@ export function GraphQLReactQueryClient<
     );
 
     const result = useInfiniteReactQuery({
+      staleTime: getTimeProp(staleTime),
+      cacheTime: cacheTime != null ? getTimeProp(cacheTime) : undefined,
       queryKey,
       queryFn: variables
         ? async ({ pageParam, signal }) => {