Merge pull request #295 from psteinroe/chore/upgrade-react-query-peer…

…-deps chore/upgrade react query peer deps
psteinroe · Oct 18, 2023 · e0ffaef · e0ffaef · vercel · Oct 18, 2023
2 parents a501afa + 263c0c7
commit e0ffaef
Show file tree

Hide file tree

Showing 20 changed files with 499 additions and 429 deletions.
diff --git a/.changeset/poor-avocados-judge.md b/.changeset/poor-avocados-judge.md
@@ -0,0 +1,6 @@
+---
+"@supabase-cache-helpers/postgrest-react-query": minor
+"@supabase-cache-helpers/storage-react-query": minor
+---
+
+chore: add support for react-query v5
diff --git a/docs/package.json b/docs/package.json
@@ -24,7 +24,7 @@
     "nextra-theme-docs": "^2.2.19",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "5.0.2"
+    "typescript": "5.2.2"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.13",

diff --git a/examples/react-query/components/contact/upsert-contact.modal.tsx b/examples/react-query/components/contact/upsert-contact.modal.tsx
@@ -51,7 +51,7 @@ export const UpsertContactModal: FC<UpsertContactModalProps> = ({
 }) => {
   const supabase = useSupabaseClient<Database>()
 
-  const { mutateAsync: upsert, isLoading } = useUpsertMutation(
+  const { mutateAsync: upsert, isPending } = useUpsertMutation(
     supabase.from("contact"),
     ["id"],
     null,
@@ -124,11 +124,11 @@ export const UpsertContactModal: FC<UpsertContactModalProps> = ({
             </div>
           </div>
           <DialogFooter>
-            <Button type="submit" disabled={isLoading}>
-              {isLoading ? (
+            <Button type="submit" disabled={isPending}>
+              {isPending ? (
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
               ) : null}{" "}
-              {isLoading ? "Loading" : "Submit"}
+              {isPending ? "Loading" : "Submit"}
             </Button>
           </DialogFooter>
         </form>

diff --git a/examples/react-query/package.json b/examples/react-query/package.json
@@ -47,9 +47,9 @@
     "@supabase-cache-helpers/storage-react-query": "workspace:*",
     "@supabase/auth-helpers-nextjs": "^0.5.6",
     "@supabase/auth-helpers-react": "^0.3.1",
-    "@tanstack/react-query": "^4.29.12",
+    "@tanstack/react-query": "^5.0.0",
     "@vercel/analytics": "^0.1.11",
-    "class-variance-authority": "^0.4.0",
+    "class-variance-authority": "0.7.0",
     "clsx": "^1.2.1",
     "cmdk": "^0.1.21",
     "lucide-react": "0.105.0-alpha.4",
@@ -80,6 +80,6 @@
     "postcss": "^8.4.14",
     "prettier": "2.8.8",
     "tailwindcss": "^3.1.7",
-    "typescript": "^4.5.3"
+    "typescript": "5.2.2"
   }
 }
diff --git a/examples/react-query/tsconfig.tsbuildinfo b/examples/react-query/tsconfig.tsbuildinfo
diff --git a/examples/swr/package.json b/examples/swr/package.json
@@ -49,7 +49,7 @@
     "@supabase/auth-helpers-react": "^0.3.1",
     "@supabase/supabase-js": "2.26.0",
     "@vercel/analytics": "^0.1.11",
-    "class-variance-authority": "^0.4.0",
+    "class-variance-authority": "0.7.0",
     "clsx": "^1.2.1",
     "cmdk": "^0.1.21",
     "lucide-react": "0.105.0-alpha.4",
@@ -81,6 +81,6 @@
     "postcss": "^8.4.14",
     "prettier": "2.8.8",
     "tailwindcss": "^3.1.7",
-    "typescript": "^4.5.3"
+    "typescript": "^5.2.2"
   }
 }
diff --git a/packages/eslint-config-custom/package.json b/packages/eslint-config-custom/package.json
@@ -11,7 +11,7 @@
     "eslint-config-universe": "11.3.0"
   },
   "devDependencies": {
-    "typescript": "5.0.4"
+    "typescript": "5.2.2"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/postgrest-core/package.json b/packages/postgrest-core/package.json
@@ -68,6 +68,6 @@
     "jest": "29.7.0",
     "ts-jest": "29.1.0",
     "tsup": "7.2.0",
-    "typescript": "5.0.4"
+    "typescript": "5.2.2"
   }
 }
diff --git a/packages/postgrest-react-query/package.json b/packages/postgrest-react-query/package.json
@@ -48,7 +48,7 @@
     "directory": "packages/postgrest-react-query"
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^4.0.0",
+    "@tanstack/react-query": "^4.0.0 || ^5.0.0",
     "react": "^16.11.0 || ^17.0.0 || ^18.0.0",
     "@supabase/postgrest-js": "^1.0.0"
   },
@@ -74,7 +74,7 @@
     "react": "18.2.0",
     "@types/react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "5.0.4"
+    "typescript": "5.2.2"
   },
   "dependencies": {
     "@supabase-cache-helpers/postgrest-core": "workspace:*"

diff --git a/packages/postgrest-react-query/src/cache/use-delete-item.ts b/packages/postgrest-react-query/src/cache/use-delete-item.ts
@@ -30,7 +30,7 @@ export function useDeleteItem<Type extends Record<string, unknown>>(
           .map((c) => c.queryKey),
         getPostgrestFilter,
         mutate: (key, fn) => {
-          queryClient.setQueriesData(key, fn);
+          queryClient.setQueriesData({ queryKey: key }, fn);
         },
         decode,
       }

diff --git a/packages/postgrest-react-query/src/cache/use-upsert-item.ts b/packages/postgrest-react-query/src/cache/use-upsert-item.ts
@@ -30,7 +30,7 @@ export function useUpsertItem<Type extends Record<string, unknown>>(
           .map((c) => c.queryKey),
         getPostgrestFilter,
         mutate: (key, fn) => {
-          queryClient.setQueriesData(key, fn);
+          queryClient.setQueriesData({ queryKey: key }, fn);
         },
         decode,
       }

diff --git a/packages/postgrest-react-query/src/query/use-query.ts b/packages/postgrest-react-query/src/query/use-query.ts
@@ -136,16 +136,16 @@ function useQuery<Result>(
   const { data, ...rest } = useReactQuery<
     AnyPostgrestResponse<Result>,
     PostgrestError
-  >(
-    encode<Result>(query, false),
-    async () => {
+  >({
+    queryKey: encode<Result>(query, false),
+    queryFn: async () => {
       if (isPostgrestBuilder(query)) {
         query = query.throwOnError();
       }
       return await query;
     },
-    config
-  );
+    ...config,
+  });
 
   return { data: data?.data, count: data?.count ?? null, ...rest };
 }

diff --git a/packages/postgrest-swr/package.json b/packages/postgrest-swr/package.json
@@ -73,7 +73,7 @@
     "react": "18.2.0",
     "@types/react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "5.0.4"
+    "typescript": "5.2.2"
   },
   "dependencies": {
     "@supabase-cache-helpers/postgrest-core": "workspace:*"

diff --git a/packages/storage-core/package.json b/packages/storage-core/package.json
@@ -55,6 +55,6 @@
     "ts-jest": "29.1.0",
     "@supabase-cache-helpers/tsconfig": "workspace:*",
     "tsup": "7.2.0",
-    "typescript": "5.0.4"
+    "typescript": "5.2.2"
   }
 }
diff --git a/packages/storage-react-query/package.json b/packages/storage-react-query/package.json
@@ -48,7 +48,7 @@
     "directory": "packages/storage-react-query"
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^4.0.0",
+    "@tanstack/react-query": "^4.0.0 || ^5.0.0",
     "react": "^16.11.0 || ^17.0.0 || ^18.0.0",
     "@supabase/storage-js": "^2.4.0"
   },
@@ -74,7 +74,7 @@
     "react": "18.2.0",
     "@types/react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "5.0.4"
+    "typescript": "5.2.2"
   },
   "dependencies": {
     "@supabase-cache-helpers/storage-core": "workspace:*"

diff --git a/packages/storage-react-query/src/query/use-directory-urls.ts b/packages/storage-react-query/src/query/use-directory-urls.ts
@@ -41,11 +41,11 @@ function useDirectoryFileUrls(
   return useReactQuery<
     (FileObject & { url: string })[] | undefined,
     StorageError
-  >(
-    encode([fileApi, path]),
-    () => createDirectoryUrlsFetcher(mode, config)(fileApi, path),
-    config
-  );
+  >({
+    queryKey: encode([fileApi, path]),
+    queryFn: () => createDirectoryUrlsFetcher(mode, config)(fileApi, path),
+    ...config,
+  });
 }
 
 export { useDirectoryFileUrls };
diff --git a/packages/storage-react-query/src/query/use-directory.ts b/packages/storage-react-query/src/query/use-directory.ts
@@ -24,11 +24,11 @@ function useDirectory(
     'queryKey' | 'queryFn'
   >
 ): UseReactQueryResult<FileObject[] | undefined, StorageError> {
-  return useReactQuery(
-    encode([fileApi, path]),
-    () => fetchDirectory(fileApi, path),
-    config
-  );
+  return useReactQuery({
+    queryKey: encode([fileApi, path]),
+    queryFn: () => fetchDirectory(fileApi, path),
+    ...config,
+  });
 }
 
 export { useDirectory };
diff --git a/packages/storage-react-query/src/query/use-file-url.ts b/packages/storage-react-query/src/query/use-file-url.ts
@@ -31,11 +31,11 @@ function useFileUrl(
   > &
     URLFetcherConfig
 ): UseReactQueryResult<string | undefined, StorageError> {
-  return useReactQuery<string | undefined, StorageError>(
-    encode([fileApi, path]),
-    () => createUrlFetcher(mode, config)(fileApi, path),
-    config
-  );
+  return useReactQuery<string | undefined, StorageError>({
+    queryKey: encode([fileApi, path]),
+    queryFn: () => createUrlFetcher(mode, config)(fileApi, path),
+    ...config,
+  });
 }
 
 export { useFileUrl };
diff --git a/packages/storage-swr/package.json b/packages/storage-swr/package.json
@@ -73,7 +73,7 @@
     "react": "18.2.0",
     "@types/react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "5.0.4"
+    "typescript": "5.2.2"
   },
   "dependencies": {
     "@supabase-cache-helpers/storage-core": "workspace:*"