New "customPages" option on useInfiniteQuery (#147)

* New "customPages" option on useInfiniteQuery * dont' reset entity store * expand changeset
soundxyz · Mar 5, 2024 · 7f9c006 · 7f9c006
1 parent 58c7ef4
commit 7f9c006
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/.changeset/olive-geese-lie.md b/.changeset/olive-geese-lie.md
@@ -0,0 +1,10 @@
+---
+'@soundxyz/graphql-react-query': minor
+---
+
+New "customPages" option on useInfiniteQuery
+
+This option can be used to be able to add a list of arbitrary pages of data into the resulting "orderedList" data.
+One use-case is for optimistic operations to be able to have temporary pages that are going to be in the pagination ordered results.
+
+This list is recommended to be memoized or live outside of the React life-cycle using solutions like Valtio.
diff --git a/packages/graphql-react-query/src/client.ts b/packages/graphql-react-query/src/client.ts
@@ -685,6 +685,8 @@ export function GraphQLReactQueryClient<
 
       enabled = true,
 
+      customPages,
+
       ...options
     }: Omit<
       UseInfiniteQueryOptions<ExecutionResultWithData<ResultOf<Doc>>, Error>,
@@ -712,6 +714,8 @@ export function GraphQLReactQueryClient<
         list(result: ResultOf<Doc>): Entity[] | null | undefined | false | '' | 0;
         uniq(entity: Entity): string;
         order?: readonly [AtLeastOne<(entity: Entity) => unknown>, AtLeastOne<'asc' | 'desc'>];
+
+        customPages?: Array<ExecutionResultWithData<ResultOf<Doc>>>;
       },
   ) {
     const entityStore = (infiniteQueryStores[query + JSON.stringify(filterQueryKey)] ||= proxy({
@@ -734,8 +738,6 @@ export function GraphQLReactQueryClient<
         >,
         options?: SetDataOptions,
       ) => {
-        entityStore.nodes = {};
-
         setInfiniteQueryData(
           {
             query,
@@ -822,7 +824,10 @@ export function GraphQLReactQueryClient<
       const currentUniq = latestUniq.current;
       const currentOrder = latestOrder.current;
 
-      const values = data.pages.reduce((acc: Record<string, Entity>, page) => {
+      function reduceAccumulatedPages(
+        acc: Record<string, Entity>,
+        page: ExecutionResultWithData<ResultOf<Doc>>,
+      ) {
         const listValues = page.data ? currentListFn(page.data) || [] : [];
 
         for (const entity of listValues) {
@@ -833,12 +838,16 @@ export function GraphQLReactQueryClient<
         }
 
         return acc;
-      }, {});
+      }
+
+      const initialValues = customPages ? customPages.reduce(reduceAccumulatedPages, {}) : {};
+
+      const values = data.pages.reduce(reduceAccumulatedPages, initialValues);
 
       if (currentOrder) return orderBy(values, currentOrder, stableOrderType);
 
       return Object.values(values);
-    }, [stableOrderType, data, entityStoreNodesSnapshot]);
+    }, [stableOrderType, data, entityStoreNodesSnapshot, customPages]);
 
     return {
       ...result,