Add hasNext to query-state

urql-graphql · Nov 1, 2024 · e1d05d4 · e1d05d4
1 parent 7f9cad5
commit e1d05d4
Show file tree

Hide file tree

Showing 19 changed files with 79 additions and 22 deletions.
diff --git a/.changeset/chatty-toes-melt.md b/.changeset/chatty-toes-melt.md
@@ -0,0 +1,9 @@
+---
+'@urql/preact': patch
+'@urql/svelte': patch
+'urql': patch
+'@urql/solid': patch
+'@urql/vue': patch
+---
+
+Add type for `hasNext` to the query and mutation results
diff --git a/packages/preact-urql/src/hooks/constants.ts b/packages/preact-urql/src/hooks/constants.ts
@@ -1,6 +1,7 @@
 export const initialState = {
   fetching: false,
   stale: false,
+  hasNext: false,
   error: undefined,
   data: undefined,
   extensions: undefined,

diff --git a/packages/preact-urql/src/hooks/useMutation.ts b/packages/preact-urql/src/hooks/useMutation.ts
@@ -45,6 +45,8 @@ export interface UseMutationState<
   data?: Data;
   /** The {@link OperationResult.error} for the executed mutation. */
   error?: CombinedError;
+  /** The {@link OperationResult.hasNext} for the executed query. */
+  hasNext: boolean;
   /** The {@link OperationResult.extensions} for the executed mutation. */
   extensions?: Record<string, any>;
   /** The {@link Operation} that the current state is for.
@@ -164,6 +166,7 @@ export function useMutation<
               fetching: false,
               stale: result.stale,
               data: result.data,
+              hasNext: result.hasNext,
               error: result.error,
               extensions: result.extensions,
               operation: result.operation,

diff --git a/packages/preact-urql/src/hooks/useQuery.ts b/packages/preact-urql/src/hooks/useQuery.ts
@@ -137,6 +137,8 @@ export interface UseQueryState<
    * last `Operation` that the current state was for.
    */
   operation?: Operation<Data, Variables>;
+  /** The {@link OperationResult.hasNext} for the executed query. */
+  hasNext: boolean;
 }
 
 /** Triggers {@link useQuery} to execute a new GraphQL query operation.
@@ -303,24 +305,26 @@ export function useQuery<
       return pipe(
         query$$,
         switchMap(query$ => {
-          if (!query$) return fromValue({ fetching: false, stale: false });
+          if (!query$)
+            return fromValue({ fetching: false, stale: false, hasNext: false });
 
           return concat([
             // Initially set fetching to true
             fromValue({ fetching: true, stale: false }),
             pipe(
               query$,
-              map(({ stale, data, error, extensions, operation }) => ({
+              map(({ stale, data, error, extensions, operation, hasNext }) => ({
                 fetching: false,
                 stale: !!stale,
+                hasNext,
                 data,
                 error,
                 operation,
                 extensions,
               }))
             ),
             // When the source proactively closes, fetching is set to false
-            fromValue({ fetching: false, stale: false }),
+            fromValue({ fetching: false, stale: false, hasNext: false }),
           ]);
         }),
         // The individual partial results are merged into each previous result

diff --git a/packages/preact-urql/src/hooks/useSubscription.test.tsx b/packages/preact-urql/src/hooks/useSubscription.test.tsx
@@ -106,6 +106,7 @@ describe('useSubscription', () => {
       );
       expect(state).toEqual({
         ...data,
+        hasNext: false,
         extensions: undefined,
         fetching: true,
         stale: false,

diff --git a/packages/react-urql/src/hooks/__snapshots__/useMutation.test.tsx.snap b/packages/react-urql/src/hooks/__snapshots__/useMutation.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`on initial useEffect > initialises default state 1`] = `
   "error": undefined,
   "extensions": undefined,
   "fetching": false,
+  "hasNext": false,
   "operation": undefined,
   "stale": false,
 }

diff --git a/packages/react-urql/src/hooks/__snapshots__/useQuery.test.tsx.snap b/packages/react-urql/src/hooks/__snapshots__/useQuery.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`on initial useEffect > initialises default state 1`] = `
   "error": undefined,
   "extensions": undefined,
   "fetching": true,
+  "hasNext": false,
   "operation": undefined,
   "stale": false,
 }

diff --git a/packages/react-urql/src/hooks/__snapshots__/useSubscription.test.tsx.snap b/packages/react-urql/src/hooks/__snapshots__/useSubscription.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`on initial useEffect > initialises default state 1`] = `
   "error": undefined,
   "extensions": undefined,
   "fetching": true,
+  "hasNext": false,
   "operation": undefined,
   "stale": false,
 }

diff --git a/packages/react-urql/src/hooks/state.ts b/packages/react-urql/src/hooks/state.ts
@@ -3,6 +3,7 @@ import * as React from 'react';
 export const initialState = {
   fetching: false,
   stale: false,
+  hasNext: false,
   error: undefined,
   data: undefined,
   extensions: undefined,
@@ -38,6 +39,7 @@ const isShallowDifferent = <T extends Record<string, any>>(a: T, b: T) => {
 interface Stateish {
   data?: any;
   error?: any;
+  hasNext: boolean;
   fetching: boolean;
   stale: boolean;
 }

diff --git a/packages/react-urql/src/hooks/useMutation.ts b/packages/react-urql/src/hooks/useMutation.ts
@@ -47,6 +47,8 @@ export interface UseMutationState<
   error?: CombinedError;
   /** The {@link OperationResult.extensions} for the executed mutation. */
   extensions?: Record<string, any>;
+  /** The {@link OperationResult.hasNext} for the executed query. */
+  hasNext: boolean;
   /** The {@link Operation} that the current state is for.
    *
    * @remarks
@@ -167,6 +169,7 @@ export function useMutation<
               error: result.error,
               extensions: result.extensions,
               operation: result.operation,
+              hasNext: result.hasNext,
             });
           }
         }),

diff --git a/packages/react-urql/src/hooks/useQuery.spec.ts b/packages/react-urql/src/hooks/useQuery.spec.ts
@@ -62,6 +62,7 @@ describe('useQuery', () => {
     expect(state).toEqual({
       fetching: true,
       stale: false,
+      hasNext: false,
       extensions: undefined,
       error: undefined,
       data: undefined,
@@ -126,6 +127,7 @@ describe('useQuery', () => {
       fetching: false,
       stale: false,
       extensions: undefined,
+      hasNext: false,
       error: 1,
       data: 0,
     });

diff --git a/packages/react-urql/src/hooks/useQuery.ts b/packages/react-urql/src/hooks/useQuery.ts
@@ -125,6 +125,8 @@ export interface UseQueryState<
   data?: Data;
   /** The {@link OperationResult.error} for the executed query. */
   error?: CombinedError;
+  /** The {@link OperationResult.hasNext} for the executed query. */
+  hasNext: boolean;
   /** The {@link OperationResult.extensions} for the executed query. */
   extensions?: Record<string, any>;
   /** The {@link Operation} that the current state is for.

diff --git a/packages/solid-urql/src/createMutation.ts b/packages/solid-urql/src/createMutation.ts
@@ -44,6 +44,8 @@ export type CreateMutationState<
    * last `Operation` that the current state was for.
    */
   operation?: Operation<Data, Variables>;
+  /** The {@link OperationResult.hasNext} for the executed query. */
+  hasNext: boolean;
 };
 
 /** Triggers {@link createMutation} to execute its GraphQL mutation operation.
@@ -140,6 +142,7 @@ export const createMutation = <
   const initialResult: CreateMutationState<Data, Variables> = {
     operation: undefined,
     fetching: false,
+    hasNext: false,
     stale: false,
     data: undefined,
     error: undefined,
@@ -167,6 +170,7 @@ export const createMutation = <
             error: result.error,
             extensions: result.extensions,
             operation: result.operation,
+            hasNext: result.hasNext,
           });
         });
       }),

diff --git a/packages/solid-urql/src/createQuery.ts b/packages/solid-urql/src/createQuery.ts
@@ -234,6 +234,7 @@ export const createQuery = <
         produce(draft => {
           draft.fetching = false;
           draft.stale = false;
+          draft.hasNext = false;
         })
       );
 
@@ -244,6 +245,7 @@ export const createQuery = <
       produce(draft => {
         draft.fetching = true;
         draft.stale = false;
+        draft.hasNext = false;
       })
     );
 
@@ -255,6 +257,7 @@ export const createQuery = <
             produce(draft => {
               draft.fetching = false;
               draft.stale = false;
+              draft.hasNext = false;
             })
           );
         }),
@@ -268,6 +271,7 @@ export const createQuery = <
                 draft.error = res.error;
                 draft.operation = res.operation;
                 draft.extensions = res.extensions;
+                draft.hasNext = res.hasNext;
               })
             );
           });

diff --git a/packages/svelte-urql/src/mutationStore.ts b/packages/svelte-urql/src/mutationStore.ts
@@ -107,13 +107,14 @@ export function mutationStore<
   const subscription = pipe(
     pipe(
       args.client.executeRequestOperation(operation),
-      map(({ stale, data, error, extensions, operation }) => ({
+      map(({ stale, data, error, extensions, operation, hasNext }) => ({
         fetching: false,
         stale,
         data,
         error,
         operation,
         extensions,
+        hasNext,
       }))
     ),
     scan(

diff --git a/packages/svelte-urql/src/queryStore.ts b/packages/svelte-urql/src/queryStore.ts
@@ -156,19 +156,29 @@ export function queryStore<
             fromStore(operation$),
             switchMap(operation => {
               return concat<Partial<OperationResultState<Data, Variables>>>([
-                fromValue({ fetching: true, stale: false }),
+                fromValue({ fetching: true, stale: false, hasNext: false }),
                 pipe(
                   args.client.executeRequestOperation(operation),
-                  map(({ stale, data, error, extensions, operation }) => ({
-                    fetching: false,
-                    stale: !!stale,
-                    data,
-                    error,
-                    operation,
-                    extensions,
-                  }))
+                  map(
+                    ({
+                      stale,
+                      data,
+                      error,
+                      extensions,
+                      operation,
+                      hasNext,
+                    }) => ({
+                      fetching: false,
+                      stale: !!stale,
+                      data,
+                      error,
+                      operation,
+                      extensions,
+                      hasNext,
+                    })
+                  )
                 ),
-                fromValue({ fetching: false }),
+                fromValue({ fetching: false, hasNext: false }),
               ]);
             })
           );

diff --git a/packages/vue-urql/src/useMutation.ts b/packages/vue-urql/src/useMutation.ts
@@ -57,6 +57,8 @@ export interface UseMutationResponse<T, V extends AnyVariables = AnyVariables> {
    * last `Operation` that the current state was for.
    */
   operation: Ref<Operation<T, V> | undefined>;
+  /** The {@link OperationResult.hasNext} for the executed query. */
+  hasNext: Ref<boolean>;
   /** Triggers {@link useMutation} to execute its GraphQL mutation operation.
    *
    * @param variables - variables using which the mutation will be executed.
@@ -135,10 +137,8 @@ export function callUseMutation<T = any, V extends AnyVariables = AnyVariables>(
 ): UseMutationResponse<T, V> {
   const data: Ref<T | undefined> = shallowRef();
 
-  const { fetching, operation, extensions, stale, error } = useRequestState<
-    T,
-    V
-  >();
+  const { fetching, operation, extensions, stale, error, hasNext } =
+    useRequestState<T, V>();
 
   return {
     data,
@@ -147,6 +147,7 @@ export function callUseMutation<T = any, V extends AnyVariables = AnyVariables>(
     error,
     operation,
     extensions,
+    hasNext,
     executeMutation(
       variables: V,
       context?: Partial<OperationContext>
@@ -165,6 +166,7 @@ export function callUseMutation<T = any, V extends AnyVariables = AnyVariables>(
           error.value = result.error;
           operation.value = result.operation;
           extensions.value = result.extensions;
+          hasNext.value = result.hasNext;
         }),
         filter(result => !result.hasNext),
         take(1),

diff --git a/packages/vue-urql/src/useQuery.ts b/packages/vue-urql/src/useQuery.ts
@@ -138,6 +138,8 @@ export interface UseQueryState<T = any, V extends AnyVariables = AnyVariables> {
    * documentation on the `pause` option.
    */
   isPaused: Ref<boolean>;
+  /** The {@link OperationResult.hasNext} for the executed query. */
+  hasNext: Ref<boolean>;
   /** Resumes {@link useQuery} if it’s currently paused.
    *
    * @remarks
@@ -241,10 +243,8 @@ export function callUseQuery<T = any, V extends AnyVariables = AnyVariables>(
 ): UseQueryResponse<T, V> {
   const data: Ref<T | undefined> = shallowRef();
 
-  const { fetching, operation, extensions, stale, error } = useRequestState<
-    T,
-    V
-  >();
+  const { fetching, operation, extensions, stale, error, hasNext } =
+    useRequestState<T, V>();
 
   const { isPaused, source, pause, resume, execute, teardown } = useClientState(
     args,
@@ -264,6 +264,7 @@ export function callUseQuery<T = any, V extends AnyVariables = AnyVariables>(
             onEnd(() => {
               fetching.value = false;
               stale.value = false;
+              hasNext.value = false;
             }),
             subscribe(res => {
               data.value = res.data;
@@ -272,12 +273,14 @@ export function callUseQuery<T = any, V extends AnyVariables = AnyVariables>(
               error.value = res.error;
               operation.value = res.operation;
               extensions.value = res.extensions;
+              hasNext.value = res.hasNext;
             })
           ).unsubscribe
         );
       } else {
         fetching.value = false;
         stale.value = false;
+        hasNext.value = false;
       }
     },
     {
@@ -321,6 +324,7 @@ export function callUseQuery<T = any, V extends AnyVariables = AnyVariables>(
     extensions,
     fetching,
     isPaused,
+    hasNext,
     pause,
     resume,
     executeQuery(opts?: Partial<OperationContext>): UseQueryResponse<T, V> {

diff --git a/packages/vue-urql/src/utils.ts b/packages/vue-urql/src/utils.ts
@@ -90,12 +90,14 @@ export const useRequestState = <
   T = any,
   V extends AnyVariables = AnyVariables,
 >() => {
+  const hasNext: Ref<boolean> = ref(false);
   const stale: Ref<boolean> = ref(false);
   const fetching: Ref<boolean> = ref(false);
   const error: Ref<CombinedError | undefined> = shallowRef();
   const operation: Ref<Operation<T, V> | undefined> = shallowRef();
   const extensions: Ref<Record<string, any> | undefined> = shallowRef();
   return {
+    hasNext,
     stale,
     fetching,
     error,