chore: update react-query to v5.28

api-platform · Apr 8, 2024 · 5207327 · 5207327
1 parent 8cb0aa8
commit 5207327
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 28 deletions.
diff --git a/templates/next/components/common/Layout.tsx b/templates/next/components/common/Layout.tsx
@@ -1,14 +1,14 @@
 import { ReactNode, useState } from "react";
-import { DehydratedState, Hydrate, QueryClient, QueryClientProvider } from "react-query";
+import { DehydratedState, HydrationBoundary, QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 const Layout = ({ children, dehydratedState }: { children: ReactNode, dehydratedState: DehydratedState }) => {
   const [queryClient] = useState(() => new QueryClient());
 
   return (
     <QueryClientProvider client={queryClient}>
-      <Hydrate state={dehydratedState}>
+      <HydrationBoundary state={dehydratedState}>
         {children}
-      </Hydrate>
+      </HydrationBoundary>
     </QueryClientProvider>
   );
 }

diff --git a/templates/next/components/foo/Form.tsx b/templates/next/components/foo/Form.tsx
@@ -2,7 +2,7 @@ import { FunctionComponent, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { ErrorMessage{{#if hasManyRelations}}, Field, FieldArray{{/if}}, Formik } from "formik";
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 
 import { fetchApi, FetchError, FetchResponse } from "../../utils/dataAccess";
 import { {{{ucf}}} } from '../../types/{{{ucf}}}';
@@ -31,17 +31,19 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => {
   const [, setError] = useState<string | null>(null);
   const router = useRouter();
 
-  const saveMutation = useMutation<FetchResponse<{{ucf}}> | undefined, Error|FetchError, SaveParams>((saveParams) => save{{{ucf}}}(saveParams));
+  const saveMutation = useMutation<FetchResponse<{{ucf}}> | undefined, Error|FetchError, SaveParams>({mutationFn: (saveParams) => save{{{ucf}}}(saveParams)});
 
-  const deleteMutation = useMutation<FetchResponse<{{ucf}}> | undefined, Error|FetchError, DeleteParams>(({ id }) => delete{{{ucf}}}(id), {
-    onSuccess: () => {
-      router.push("/{{{lc}}}s");
-    },
-    onError: (error)=> {
-      setError(`Error when deleting the resource: ${error}`);
-      console.error(error);
-    }
-  });
+  const deleteMutation = useMutation<FetchResponse<{{ucf}}> | undefined, Error|FetchError, DeleteParams>(
+    {
+      mutationFn: ({ id }) => delete{{{ucf}}}(id),
+      onSuccess: () => {
+        router.push("/{{{lc}}}s");
+      },
+      onError: (error)=> {
+        setError(`Error when deleting the resource: ${error}`);
+        console.error(error);
+      },
+    });
 
 	const handleDelete = () => {
     if (!{{lc}} || !{{lc}}["@id"]) return;
@@ -90,7 +92,7 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => {
                   isValid: true,
                   msg: `Element ${isCreation ? "created" : "updated"}.`,
                 });
-                router.push("/{{{name}}}");
+                router.push("/{{{lc}}}s");
               },
               onError: (error) => {
                 setStatus({

diff --git a/templates/next/components/foo/PageList.tsx b/templates/next/components/foo/PageList.tsx
@@ -1,7 +1,7 @@
 import { NextComponentType, NextPageContext } from "next";
 import { useRouter } from "next/router";
 import Head from "next/head";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 
 import Pagination from "../common/Pagination";
 import { List } from "./List";
@@ -17,7 +17,7 @@ const getPagePath = (path: string) => `/{{{lc}}}s/page/${parsePage("{{{name}}}",
 export const PageList: NextComponentType<NextPageContext> = () => {
   const { query: { page } } = useRouter();
   const { data: { data: {{lc}}s, hubURL } = { hubURL: null } } =
-    useQuery<FetchResponse<PagedCollection<{{{ucf}}}>> | undefined>(get{{{ucf}}}sPath(page), get{{{ucf}}}s(page));
+    useQuery<FetchResponse<PagedCollection<{{{ucf}}}>> | undefined, Error, FetchResponse<PagedCollection<{{{ucf}}}>> | undefined>({queryKey: [get{{{ucf}}}sPath(page)], queryFn: get{{{ucf}}}s(page)});
   const collection = useMercure({{lc}}s, hubURL);
 
   if (!collection || !collection["{{{hydraPrefix}}}member"]) return null;

diff --git a/templates/next/pages/_app.tsx b/templates/next/pages/_app.tsx
@@ -1,6 +1,6 @@
 import "../styles/style.css";
 import type { AppProps } from "next/app";
-import type { DehydratedState } from "react-query";
+import type { DehydratedState } from "@tanstack/react-query";
 
 import Layout from "../components/common/Layout";
 

diff --git a/templates/next/pages/foos/[id]/edit.tsx b/templates/next/pages/foos/[id]/edit.tsx
@@ -2,7 +2,7 @@ import { GetStaticPaths, GetStaticProps, NextComponentType, NextPageContext } fr
 import DefaultErrorPage from "next/error";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { dehydrate, QueryClient, useQuery } from "react-query";
+import { dehydrate, QueryClient, useQuery } from "@tanstack/react-query";
 
 import { Form } from "../../../components/{{{lc}}}/Form";
 import { PagedCollection } from "../../../types/collection";
@@ -15,7 +15,7 @@ const Page: NextComponentType<NextPageContext> = () => {
   const router = useRouter();
   const { id } = router.query;
 
-  const { data: { data: {{lc}} } = {} } = useQuery<FetchResponse<{{{ucf}}}> | undefined>(['{{{lc}}}', id], () => get{{{ucf}}}(id));
+  const { data: { data: {{lc}} } = {} } = useQuery<FetchResponse<{{{ucf}}}> | undefined, Error, FetchResponse<{{{ucf}}}> | undefined>({queryKey: ['{{{lc}}}', id], queryFn: () => get{{{ucf}}}(id)});
 
   if (!{{{lc}}}) {
     return <DefaultErrorPage statusCode={404} />;
@@ -36,7 +36,7 @@ const Page: NextComponentType<NextPageContext> = () => {
 export const getStaticProps: GetStaticProps = async ({ params: { id } = {} }) => {
   if (!id) throw new Error('id not in query param');
   const queryClient = new QueryClient();
-  await queryClient.prefetchQuery(["{{{lc}}}", id], () => get{{{ucf}}}(id));
+  await queryClient.prefetchQuery({queryKey: ["{{{lc}}}", id], queryFn: () => get{{{ucf}}}(id)});
 
   return {
     props: {

diff --git a/templates/next/pages/foos/[id]/index.tsx b/templates/next/pages/foos/[id]/index.tsx
@@ -2,7 +2,7 @@ import { GetStaticPaths, GetStaticProps, NextComponentType, NextPageContext } fr
 import DefaultErrorPage from "next/error";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { dehydrate, QueryClient, useQuery } from "react-query";
+import { dehydrate, QueryClient, useQuery } from "@tanstack/react-query";
 
 import { Show } from "../../../components/{{{lc}}}/Show";
 import { PagedCollection } from "../../../types/collection";
@@ -17,7 +17,7 @@ const Page: NextComponentType<NextPageContext> = () => {
   const { id } = router.query;
 
   const { data: { data: {{lc}}, hubURL, text } = { hubURL: null, text: '' } } =
-    useQuery<FetchResponse<{{{ucf}}}> | undefined>(['{{{lc}}}', id], () => get{{{ucf}}}(id));
+    useQuery<FetchResponse<{{{ucf}}}> | undefined, Error, FetchResponse<{{{ucf}}}> | undefined>({queryKey: ['{{{lc}}}', id], queryFn: () => get{{{ucf}}}(id)});
   const {{{lc}}}Data = useMercure({{lc}}, hubURL);
 
   if (!{{{lc}}}Data) {
@@ -39,7 +39,7 @@ const Page: NextComponentType<NextPageContext> = () => {
 export const getStaticProps: GetStaticProps = async ({ params: { id } = {} }) => {
   if (!id) throw new Error('id not in query param');
   const queryClient = new QueryClient();
-  await queryClient.prefetchQuery(["{{{lc}}}", id], () => get{{{ucf}}}(id));
+  await queryClient.prefetchQuery({queryKey: ["{{{lc}}}", id], queryFn: () => get{{{ucf}}}(id)});
 
   return {
     props: {

diff --git a/templates/next/pages/foos/index.tsx b/templates/next/pages/foos/index.tsx
@@ -1,11 +1,11 @@
 import { GetStaticProps } from "next";
-import { dehydrate, QueryClient } from "react-query";
+import { dehydrate, QueryClient } from "@tanstack/react-query";
 
 import { PageList, get{{{ucf}}}s, get{{{ucf}}}sPath } from "../../components/{{{lc}}}/PageList";
 
 export const getStaticProps: GetStaticProps = async () => {
   const queryClient = new QueryClient();
-  await queryClient.prefetchQuery(get{{{ucf}}}sPath(), get{{{ucf}}}s());
+  await queryClient.prefetchQuery({queryKey: [get{{{ucf}}}sPath()], queryFn: get{{{ucf}}}s()});
 
   return {
     props: {

diff --git a/templates/next/pages/foos/page/[page].tsx b/templates/next/pages/foos/page/[page].tsx
@@ -1,5 +1,5 @@
 import { GetStaticPaths, GetStaticProps } from "next";
-import { dehydrate, QueryClient } from "react-query";
+import { dehydrate, QueryClient } from "@tanstack/react-query";
 
 import { PageList, get{{{ucf}}}s, get{{{ucf}}}sPath } from "../../../components/{{{lc}}}/PageList";
 import { PagedCollection } from "../../../types/collection";
@@ -8,7 +8,7 @@ import { fetchApi, getCollectionPaths } from "../../../utils/dataAccess";
 
 export const getStaticProps: GetStaticProps = async ({ params: { page } = {} }) => {
   const queryClient = new QueryClient();
-  await queryClient.prefetchQuery(get{{{ucf}}}sPath(page), get{{{ucf}}}s(page));
+  await queryClient.prefetchQuery({queryKey: [get{{{ucf}}}sPath(page)], queryFn: get{{{ucf}}}s(page)});
 
   return {
     props: {