chore(react-components): remove query client provider dependency

awslabs · May 6, 2024 · ecbb92c · ecbb92c
1 parent 4554ddd
commit ecbb92c
Show file tree

Hide file tree

Showing 9 changed files with 498 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -68,6 +68,8 @@
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.16",
     "@storybook/testing-library": "^0.2.0",
+    "@tanstack/eslint-plugin-query": "^5.32.1",
+    "@tanstack/react-query-devtools": "^5.32.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@types/color": "^3.0.3",
@@ -116,6 +118,7 @@
     "@iot-app-kit/core": "10.2.0",
     "@iot-app-kit/core-util": "10.2.0",
     "@iot-app-kit/source-iottwinmaker": "10.2.0",
+    "@tanstack/react-query": "^5.32.1",
     "color": "^4.2.3",
     "copy-to-clipboard": "^3.3.3",
     "d3-array": "^3.2.3",

diff --git a/packages/react-components/src/queries/useDescribeAsset/useDescribeAsset.ts b/packages/react-components/src/queries/useDescribeAsset/useDescribeAsset.ts
@@ -3,6 +3,7 @@ import { QueryFunctionContext, useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { DescribeAssetCacheKeyFactory } from './describeAssetQueryKeyFactory';
 import { GetDescribeAssetRequest } from './getDescribeAssetRequest';
+import { queryClient } from '../queryClient';
 
 export interface UseDescribeAssetOptions {
   client: IoTSiteWiseClient;
@@ -13,11 +14,14 @@ export interface UseDescribeAssetOptions {
 export function useDescribeAsset({ client, assetId }: UseDescribeAssetOptions) {
   const cacheKeyFactory = new DescribeAssetCacheKeyFactory({ assetId });
 
-  return useQuery({
-    enabled: isEnabled(assetId),
-    queryKey: cacheKeyFactory.create(),
-    queryFn: createQueryFn(client),
-  });
+  return useQuery(
+    {
+      enabled: isEnabled(assetId),
+      queryKey: cacheKeyFactory.create(),
+      queryFn: createQueryFn(client),
+    },
+    queryClient
+  );
 }
 
 const isEnabled = (assetId?: string): assetId is string => Boolean(assetId);

diff --git a/...ts/src/queries/useDescribeAssetModelCompositeModel/useDescribeAssetModelCompositeModel.ts b/...ts/src/queries/useDescribeAssetModelCompositeModel/useDescribeAssetModelCompositeModel.ts
@@ -3,6 +3,7 @@ import { QueryFunctionContext, useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { AssetModelCompositeModelCacheKeyFactory } from './assetModelCompositeModelQueryKeyFactory';
 import { GetDescribeAssetCompositeModelRequest } from './getDescribeAssetModelCompositeModelRequest';
+import { queryClient } from '../queryClient';
 
 export type UseDescribeAssetModelCompositeModelOptions = {
   assetModelId?: string;
@@ -24,11 +25,14 @@ export function useDescribeAssetModelCompositeModel({
     assetModelCompositeModelId,
   });
 
-  return useQuery({
-    enabled: isEnabled({ assetModelId, assetModelCompositeModelId }),
-    queryKey: cacheKeyFactory.create(),
-    queryFn: createQueryFn(client),
-  });
+  return useQuery(
+    {
+      enabled: isEnabled({ assetModelId, assetModelCompositeModelId }),
+      queryKey: cacheKeyFactory.create(),
+      queryFn: createQueryFn(client),
+    },
+    queryClient
+  );
 }
 
 const isAssetModelId = (assetModelId?: string): assetModelId is string =>

diff --git a/...ges/react-components/src/queries/useDescribeAssetProperties/useDescribeAssetProperties.ts b/...ges/react-components/src/queries/useDescribeAssetProperties/useDescribeAssetProperties.ts
@@ -6,6 +6,7 @@ import {
 } from '../useDescribeAssetProperty';
 import { createNonNullableList } from '../../utils/createNonNullableList';
 import { DescribeAssetPropertyCacheKeyFactory } from '../useDescribeAssetProperty/describeAssetPropertyQueryKeyFactory';
+import { queryClient } from '../queryClient';
 
 export interface UseDescribeAssetPropertiesOptions {
   client: IoTSiteWiseClient;
@@ -17,16 +18,21 @@ export const useDescribeAssetProperties = ({
   describeAssetPropertyRequests,
 }: UseDescribeAssetPropertiesOptions) => {
   const queries =
-    useQueries({
-      queries: describeAssetPropertyRequests.map(({ assetId, propertyId }) => ({
-        enabled: isDescribeAssetPropertyEnabled({ assetId, propertyId }),
-        queryKey: new DescribeAssetPropertyCacheKeyFactory({
-          assetId,
-          propertyId,
-        }).create(),
-        queryFn: createDescribeAssetPropertyQueryFn(client),
-      })),
-    }) ?? [];
+    useQueries(
+      {
+        queries: describeAssetPropertyRequests.map(
+          ({ assetId, propertyId }) => ({
+            enabled: isDescribeAssetPropertyEnabled({ assetId, propertyId }),
+            queryKey: new DescribeAssetPropertyCacheKeyFactory({
+              assetId,
+              propertyId,
+            }).create(),
+            queryFn: createDescribeAssetPropertyQueryFn(client),
+          })
+        ),
+      },
+      queryClient
+    ) ?? [];
 
   const data = createNonNullableList(queries.flatMap(({ data }) => data));
 

diff --git a/packages/react-components/src/queries/useDescribeAssetProperty/useDescribeAssetProperty.ts b/packages/react-components/src/queries/useDescribeAssetProperty/useDescribeAssetProperty.ts
@@ -3,6 +3,7 @@ import { QueryFunctionContext, useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { DescribeAssetPropertyCacheKeyFactory } from './describeAssetPropertyQueryKeyFactory';
 import { GetDescribeAssetPropertyRequest } from './getDescribeAssetPropertyRequest';
+import { queryClient } from '../queryClient';
 
 export interface UseDescribeAssetPropertyOptions {
   client: IoTSiteWiseClient;
@@ -21,11 +22,14 @@ export function useDescribeAssetProperty({
     propertyId,
   });
 
-  return useQuery({
-    enabled: isDescribeAssetPropertyEnabled({ assetId, propertyId }),
-    queryKey: cacheKeyFactory.create(),
-    queryFn: createDescribeAssetPropertyQueryFn(client),
-  });
+  return useQuery(
+    {
+      enabled: isDescribeAssetPropertyEnabled({ assetId, propertyId }),
+      queryKey: cacheKeyFactory.create(),
+      queryFn: createDescribeAssetPropertyQueryFn(client),
+    },
+    queryClient
+  );
 }
 
 const isAssetId = (assetId?: string): assetId is string => Boolean(assetId);

diff --git a/...components/src/queries/useGetAssetPropertyValueHistory/useGetAssetPropertyValueHistory.ts b/...components/src/queries/useGetAssetPropertyValueHistory/useGetAssetPropertyValueHistory.ts
@@ -4,6 +4,7 @@ import invariant from 'tiny-invariant';
 import { AssetPropertyValueHistoryCacheKeyFactory } from './getAssetPropertyValueHistoryQueryKeyFactory';
 import { GetGetAssetPropertyValueHistoryRequest } from './getGetAssetPropertyValueHistoryRequest';
 import { createNonNullableList } from '../../utils/createNonNullableList';
+import { queryClient } from '../queryClient';
 
 export interface UseGetAssetPropertyValueHistoryOptions {
   client: IoTSiteWiseClient;
@@ -42,12 +43,16 @@ export function useGetAssetPropertyValueHistory({
     isError,
     error,
     isLoading,
-  } = useInfiniteQuery({
-    enabled: isEnabled({ assetId, propertyId, startDate, endDate }),
-    queryKey: cacheKeyFactory.create(),
-    queryFn: createQueryFn(client),
-    getNextPageParam: ({ nextToken }) => nextToken,
-  });
+  } = useInfiniteQuery(
+    {
+      enabled: isEnabled({ assetId, propertyId, startDate, endDate }),
+      queryKey: cacheKeyFactory.create(),
+      queryFn: createQueryFn(client),
+      getNextPageParam: ({ nextToken }) => nextToken,
+      initialPageParam: undefined,
+    },
+    queryClient
+  );
 
   const { pages } = data ?? { pages: [] };
 
@@ -122,7 +127,7 @@ const createQueryFn = (client: IoTSiteWiseClient) => {
       propertyId,
       startDate: new Date(startDate),
       endDate: new Date(endDate),
-      nextToken,
+      nextToken: nextToken as string | undefined,
       client,
       signal,
     });

diff --git a/packages/react-components/stories/anomaly/anomaly.stories.tsx b/packages/react-components/stories/anomaly/anomaly.stories.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { queryClient } from '../../src/queries';
 import { AnomalyWidget } from '../../src/components/anomaly-widget';
@@ -48,10 +47,10 @@ export default {
   },
   decorators: [
     (Story) => (
-      <QueryClientProvider client={queryClient}>
+      <>
         <Story />
-        <ReactQueryDevtools initialIsOpen={true} />
-      </QueryClientProvider>
+        <ReactQueryDevtools client={queryClient} initialIsOpen={true} />
+      </>
     ),
   ],
 } as ComponentMeta<typeof AnomalyWidget>;

diff --git a/packages/react-components/stories/queries/queriesBase.stories.tsx b/packages/react-components/stories/queries/queriesBase.stories.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import type { FC } from 'react';
 import { getSiteWiseClient } from '@iot-app-kit/core-util';
-import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import {
   queryClient,
@@ -52,10 +51,10 @@ export default {
   },
   decorators: [
     (Story) => (
-      <QueryClientProvider client={queryClient}>
+      <>
         <Story />
-        <ReactQueryDevtools initialIsOpen={true} />
-      </QueryClientProvider>
+        <ReactQueryDevtools client={queryClient} initialIsOpen={true} />
+      </>
     ),
   ],
 } as ComponentMeta<typeof RenderQueries>;