feat(admin-ui): Enable useQuery hook to refetch on channel change (#2869

)

docs/docs/reference/admin-ui-api/react-hooks/use-lazy-query.md

@@ -11,9 +11,9 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## useLazyQuery
 
-<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-hooks/use-query.ts" sourceLine="113" packageName="@vendure/admin-ui" since="2.2.0" />
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-hooks/use-query.ts" sourceLine="121" packageName="@vendure/admin-ui" since="2.2.0" />
 
-A React hook which allows you to execute a GraphQL query.
+A React hook which allows you to execute a GraphQL query lazily.
 
 *Example*
 
@@ -37,7 +37,7 @@ type ProductResponse = {
 }
 
 export const MyComponent = () => {
-    const [getProduct, { data, loading, error }] = useLazyQuery<ProductResponse>(GET_PRODUCT);
+    const [getProduct, { data, loading, error }] = useLazyQuery<ProductResponse>(GET_PRODUCT, { refetchOnChannelChange: true });
 
    const handleClick = () => {
         getProduct({
@@ -64,11 +64,15 @@ export const MyComponent = () => {
 ```
 
 ```ts title="Signature"
-function useLazyQuery<T, V extends Record<string, any> = Record<string, any>>(query: DocumentNode | TypedDocumentNode<T, V>): void
+function useLazyQuery<T, V extends Record<string, any> = Record<string, any>>(query: DocumentNode | TypedDocumentNode<T, V>, options: {refetchOnChannelChange: boolean } = {refetchOnChannelChange: false}): void
 ```
 Parameters
 
 ### query
 
 <MemberInfo kind="parameter" type={`DocumentNode | TypedDocumentNode&#60;T, V&#62;`} />
 
+### options
+
+<MemberInfo kind="parameter" type={`{refetchOnChannelChange: boolean }`} />
+

docs/docs/reference/admin-ui-api/react-hooks/use-query.md

@@ -31,7 +31,7 @@ const GET_PRODUCT = gql`
    }`;
 
 export const MyComponent = () => {
-    const { data, loading, error } = useQuery(GET_PRODUCT, { id: '1' });
+    const { data, loading, error } = useQuery(GET_PRODUCT, { id: '1' }, { refetchOnChannelChange: true });
 
     if (loading) return <div>Loading...</div>;
     if (error) return <div>Error! { error }</div>;
@@ -45,7 +45,7 @@ export const MyComponent = () => {
 ```
 
 ```ts title="Signature"
-function useQuery<T, V extends Record<string, any> = Record<string, any>>(query: DocumentNode | TypedDocumentNode<T, V>, variables?: V): void
+function useQuery<T, V extends Record<string, any> = Record<string, any>>(query: DocumentNode | TypedDocumentNode<T, V>, variables?: V, options: { refetchOnChannelChange: boolean } = { refetchOnChannelChange: false }): void
 ```
 Parameters
 
@@ -57,3 +57,7 @@ Parameters
 
 <MemberInfo kind="parameter" type={`V`} />
 
+### options
+
+<MemberInfo kind="parameter" type={`{ refetchOnChannelChange: boolean }`} />
+

packages/admin-ui/src/lib/react/src/react-hooks/use-query.ts

@@ -25,7 +25,7 @@ import { HostedComponentContext } from '../directives/react-component-host.direc
  *    }`;
  *
  * export const MyComponent = () => {
- *     const { data, loading, error } = useQuery(GET_PRODUCT, { id: '1' });
+ *     const { data, loading, error } = useQuery(GET_PRODUCT, { id: '1' }, { refetchOnChannelChange: true });
  *
  *     if (loading) return <div>Loading...</div>;
  *     if (error) return <div>Error! { error }</div>;
@@ -43,10 +43,16 @@ import { HostedComponentContext } from '../directives/react-component-host.direc
 export function useQuery<T, V extends Record<string, any> = Record<string, any>>(
     query: DocumentNode | TypedDocumentNode<T, V>,
     variables?: V,
+    options: { refetchOnChannelChange: boolean } = { refetchOnChannelChange: false },
 ) {
-    const { data, loading, error, runQuery } = useDataService<T, V>(
-        (dataService, vars) => dataService.query(query, vars).stream$,
-    );
+    const { refetchOnChannelChange } = options;
+    const { data, loading, error, runQuery } = useDataService<T, V>((dataService, vars) => {
+        let queryFn = dataService.query(query, vars);
+        if (refetchOnChannelChange) {
+            queryFn = queryFn.refetchOnChannelChange();
+        }
+        return queryFn.stream$;
+    });
     useEffect(() => {
         const subscription = runQuery(variables).subscribe();
         return () => subscription.unsubscribe();
@@ -58,7 +64,7 @@ export function useQuery<T, V extends Record<string, any> = Record<string, any>>
 
 /**
  * @description
- * A React hook which allows you to execute a GraphQL query.
+ * A React hook which allows you to execute a GraphQL query lazily.
  *
  * @example
  * ```ts
@@ -81,7 +87,7 @@ export function useQuery<T, V extends Record<string, any> = Record<string, any>>
  * }
  *
  * export const MyComponent = () => {
- *     const [getProduct, { data, loading, error }] = useLazyQuery<ProductResponse>(GET_PRODUCT);
+ *     const [getProduct, { data, loading, error }] = useLazyQuery<ProductResponse>(GET_PRODUCT, { refetchOnChannelChange: true });
  *
  *    const handleClick = () => {
  *         getProduct({
@@ -112,10 +118,16 @@ export function useQuery<T, V extends Record<string, any> = Record<string, any>>
  */
 export function useLazyQuery<T, V extends Record<string, any> = Record<string, any>>(
     query: DocumentNode | TypedDocumentNode<T, V>,
+    options: { refetchOnChannelChange: boolean } = { refetchOnChannelChange: false },
 ) {
-    const { data, loading, error, runQuery } = useDataService<T, V>(
-        (dataService, vars) => dataService.query(query, vars).stream$,
-    );
+    const { refetchOnChannelChange } = options;
+    const { data, loading, error, runQuery } = useDataService<T, V>((dataService, vars) => {
+        let queryFn = dataService.query(query, vars);
+        if (refetchOnChannelChange) {
+            queryFn = queryFn.refetchOnChannelChange();
+        }
+        return queryFn.stream$;
+    });
     const rest = { data, loading, error };
     const execute = (variables?: V) => firstValueFrom(runQuery(variables));
     return [execute, rest] as [typeof execute, typeof rest];