Skip to content

Commit

Permalink
feat(use-query): Enable to refetch on channel change
Browse files Browse the repository at this point in the history
  • Loading branch information
gdarchen committed Jun 3, 2024
1 parent cb08427 commit 0ce9796
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 15 deletions.
12 changes: 8 additions & 4 deletions docs/docs/reference/admin-ui-api/react-hooks/use-lazy-query.md
Original file line number Diff line number Diff line change
Expand Up @@ -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*

Expand All @@ -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({
Expand All @@ -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 }`} />

8 changes: 6 additions & 2 deletions docs/docs/reference/admin-ui-api/react-hooks/use-query.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand All @@ -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

Expand All @@ -57,3 +57,7 @@ Parameters

<MemberInfo kind="parameter" type={`V`} />

### options

<MemberInfo kind="parameter" type={`{ refetchOnChannelChange: boolean }`} />

30 changes: 21 additions & 9 deletions packages/admin-ui/src/lib/react/src/react-hooks/use-query.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand All @@ -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();
Expand All @@ -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
Expand All @@ -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({
Expand Down Expand Up @@ -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];
Expand Down

0 comments on commit 0ce9796

Please sign in to comment.