update packages (including react-query v5)

Author: colbylwilliams

package-lock.json

@@ -10,36 +10,36 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@azure/core-auth": "^1.5.0",
-    "@azure/msal-browser": "^3.1.0",
-    "@azure/msal-react": "^2.0.3",
+    "@azure/core-auth": "^1.7.2",
+    "@azure/msal-browser": "^3.13.0",
+    "@azure/msal-react": "^2.0.15",
     "@developer-platform/entities": "^0.4.29",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@microsoft/microsoft-graph-client": "^3.0.7",
-    "@mui/icons-material": "^5.14.9",
-    "@mui/material": "^5.14.10",
-    "@rjsf/core": "5.16.1",
-    "@rjsf/mui": "5.16.1",
-    "@rjsf/utils": "5.16.1",
-    "@rjsf/validator-ajv8": "5.16.1",
-    "@tanstack/react-query": "^4.35.3",
-    "@tanstack/react-query-devtools": "^4.35.3",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/material": "^5.15.15",
+    "@rjsf/core": "5.18.2",
+    "@rjsf/mui": "5.18.2",
+    "@rjsf/utils": "5.18.2",
+    "@rjsf/validator-ajv8": "5.18.2",
+    "@tanstack/react-query": "^5.32.0",
+    "@tanstack/react-query-devtools": "^5.32.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.16.0",
+    "react-router-dom": "^6.23.0",
     "vite-plugin-svgr": "^4.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.56",
-    "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@typescript-eslint/eslint-plugin": "^7.7.1",
+    "@typescript-eslint/parser": "^7.7.1",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "typescript": "^5.2.2",
-    "vite": "^5.1.4"
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "typescript": "^5.4.5",
+    "vite": "^5.1.10"
   }
 }

package.json

@@ -27,7 +27,7 @@ export const App: React.FC = () => (
         <Route path='/*' element={<RootView />} />
       </Routes>
     </BrowserRouter>
-    <ReactQueryDevtools initialIsOpen={false} position='bottom-right' />
+    <ReactQueryDevtools initialIsOpen={false} />
   </QueryClientProvider>
 );
 

src/App.tsx

@@ -22,6 +22,13 @@ export const CreateForm: React.FC<ICreateFormProps> = () => {
 
     const { data: templates, isLoading } = useEntities('template');
 
+    // const { data: tt } = useEntity({
+    //     kind: 'template',
+    //     provider: provider ?? '',
+    //     namespace: namespace ?? '',
+    //     name: name ?? '',
+    // });
+
     const create = useTemplateCreate();
 
     const [template, setTemplate] = useState<Template>();

src/components/CreateForm.tsx

@@ -10,9 +10,9 @@ export const useEntities = (kind: string) => {
   const isAuthenticated = useIsAuthenticated();
   const queryClient = useQueryClient();
 
-  return useQuery(
-    ['entities', kind.toLowerCase()],
-    async () => {
+  return useQuery({
+    queryKey: ['entities', kind.toLowerCase()],
+    queryFn: async () => {
       console.log(`Fetching ${kind} entities`);
 
       const { entities, providerAuth } = await getEntities(kind);
@@ -46,11 +46,9 @@ export const useEntities = (kind: string) => {
 
       return entities;
     },
-    {
-      refetchOnMount: false,
-      refetchOnWindowFocus: false,
-      staleTime: 1000 * 60 * 2, // 2 minutes
-      enabled: isAuthenticated,
-    }
-  );
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    staleTime: 1000 * 60 * 2, // 2 minutes
+    enabled: isAuthenticated,
+  });
 };

src/hooks/useEntities.ts

@@ -9,15 +9,15 @@ import { getEntity } from '../API';
 export const useEntity = (ref: EntityRef) => {
   const isAuthenticated = useIsAuthenticated();
 
-  return useQuery(
-    [
+  return useQuery({
+    queryKey: [
       'entities',
       ref.kind.toLowerCase(),
       ref.provider.toLowerCase(),
       ref.namespace?.toLowerCase() ?? 'default',
       ref.name.toLowerCase(),
     ],
-    async () => {
+    queryFn: async () => {
       console.log(`Fetching ${ref.kind} entity ${ref.kind}:${ref.provider}/${ref.namespace ?? 'default'}/${ref.name}`);
 
       const entity = await getEntity(ref);
@@ -48,11 +48,9 @@ export const useEntity = (ref: EntityRef) => {
 
       return entity;
     },
-    {
-      refetchOnMount: false,
-      refetchOnWindowFocus: false,
-      staleTime: 1000 * 60 * 2, // 2 minutes
-      enabled: isAuthenticated,
-    }
-  );
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    staleTime: 1000 * 60 * 2, // 2 minutes
+    enabled: isAuthenticated,
+  });
 };

src/hooks/useEntity.ts

@@ -8,7 +8,9 @@ import { getMe } from '../MSGraph';
 export const useGraphUser = () => {
   const isAuthenticated = useIsAuthenticated();
 
-  return useQuery(['graphUser', 'me'], async () => await getMe(), {
+  return useQuery({
+    queryKey: ['graphUser', 'me'],
+    queryFn: async () => await getMe(),
     refetchOnMount: false,
     refetchOnWindowFocus: false,
     staleTime: 1000 * 60 * 5, // 5 minutes

src/hooks/useGraphUser.ts

@@ -8,7 +8,9 @@ import { useQuery } from '@tanstack/react-query';
 export const useProviderAuth = () => {
   const isAuthenticated = useIsAuthenticated();
 
-  return useQuery(['providers', 'auth'], () => [] as ProviderAuth[], {
+  return useQuery({
+    queryKey: ['providers', 'auth'],
+    queryFn: () => [] as ProviderAuth[],
     refetchOnMount: false,
     refetchOnWindowFocus: false,
     staleTime: Infinity,

src/hooks/useProviderAuth.ts

@@ -15,21 +15,19 @@ export const useTemplateCreate = () => {
 
   const queryClient = useQueryClient();
 
-  return useMutation(
-    async (payload: CreatePayload) => {
+  return useMutation({
+    mutationFn: async (payload: CreatePayload) => {
       const operation = await create(payload.ref, payload.input);
       return operation;
     },
-    {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      onSuccess: async (_data: Operation, _variables: CreatePayload, _context: unknown) => {
-        const sleepSeconds = 3;
-        navigate(`/new`);
-        console.log(`Invalidating entities after ${sleepSeconds} seconds...`);
-        await sleep(sleepSeconds * 1000);
-        console.log(`Invalidating entities`);
-        queryClient.invalidateQueries(['entities'], { type: 'all' });
-      },
-    }
-  ).mutateAsync;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onSuccess: async (_data: Operation, _variables: CreatePayload, _context: unknown) => {
+      const sleepSeconds = 3;
+      navigate(`/new`);
+      console.log(`Invalidating entities after ${sleepSeconds} seconds...`);
+      await sleep(sleepSeconds * 1000);
+      console.log(`Invalidating entities`);
+      queryClient.invalidateQueries({ queryKey: ['entities'], type: 'all' });
+    },
+  }).mutateAsync;
 };