diff --git a/docs/docs/reference/admin-ui-api/react-hooks/use-lazy-query.md b/docs/docs/reference/admin-ui-api/react-hooks/use-lazy-query.md
index 73a20a2c2c..f174264cab 100644
--- a/docs/docs/reference/admin-ui-api/react-hooks/use-lazy-query.md
+++ b/docs/docs/reference/admin-ui-api/react-hooks/use-lazy-query.md
@@ -11,9 +11,9 @@ import MemberDescription from '@site/src/components/MemberDescription';
## useLazyQuery
-
+
-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(GET_PRODUCT);
+ const [getProduct, { data, loading, error }] = useLazyQuery(GET_PRODUCT, { refetchOnChannelChange: true });
const handleClick = () => {
getProduct({
@@ -64,7 +64,7 @@ export const MyComponent = () => {
```
```ts title="Signature"
-function useLazyQuery = Record>(query: DocumentNode | TypedDocumentNode): void
+function useLazyQuery = Record>(query: DocumentNode | TypedDocumentNode, options: {refetchOnChannelChange: boolean } = {refetchOnChannelChange: false}): void
```
Parameters
@@ -72,3 +72,7 @@ Parameters
+### options
+
+
+
diff --git a/docs/docs/reference/admin-ui-api/react-hooks/use-query.md b/docs/docs/reference/admin-ui-api/react-hooks/use-query.md
index 6bae2549d9..3f884cd566 100644
--- a/docs/docs/reference/admin-ui-api/react-hooks/use-query.md
+++ b/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 Loading...
;
if (error) return Error! { error }
;
@@ -45,7 +45,7 @@ export const MyComponent = () => {
```
```ts title="Signature"
-function useQuery = Record>(query: DocumentNode | TypedDocumentNode, variables?: V): void
+function useQuery = Record>(query: DocumentNode | TypedDocumentNode, variables?: V, options: { refetchOnChannelChange: boolean } = { refetchOnChannelChange: false }): void
```
Parameters
@@ -57,3 +57,7 @@ Parameters
+### options
+
+
+
diff --git a/packages/admin-ui/src/lib/react/src/react-hooks/use-query.ts b/packages/admin-ui/src/lib/react/src/react-hooks/use-query.ts
index 4c68b86601..dcb61e1f92 100644
--- a/packages/admin-ui/src/lib/react/src/react-hooks/use-query.ts
+++ b/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 Loading...
;
* if (error) return Error! { error }
;
@@ -43,10 +43,16 @@ import { HostedComponentContext } from '../directives/react-component-host.direc
export function useQuery = Record>(
query: DocumentNode | TypedDocumentNode,
variables?: V,
+ options: { refetchOnChannelChange: boolean } = { refetchOnChannelChange: false },
) {
- const { data, loading, error, runQuery } = useDataService(
- (dataService, vars) => dataService.query(query, vars).stream$,
- );
+ const { refetchOnChannelChange } = options;
+ const { data, loading, error, runQuery } = useDataService((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 = Record>
/**
* @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 = Record>
* }
*
* export const MyComponent = () => {
- * const [getProduct, { data, loading, error }] = useLazyQuery(GET_PRODUCT);
+ * const [getProduct, { data, loading, error }] = useLazyQuery(GET_PRODUCT, { refetchOnChannelChange: true });
*
* const handleClick = () => {
* getProduct({
@@ -112,10 +118,16 @@ export function useQuery = Record>
*/
export function useLazyQuery = Record>(
query: DocumentNode | TypedDocumentNode,
+ options: { refetchOnChannelChange: boolean } = { refetchOnChannelChange: false },
) {
- const { data, loading, error, runQuery } = useDataService(
- (dataService, vars) => dataService.query(query, vars).stream$,
- );
+ const { refetchOnChannelChange } = options;
+ const { data, loading, error, runQuery } = useDataService((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];