pagination type policies

SatalBill · Aug 17, 2020 · 358f5a5 · 358f5a5
1 parent 3b45c0a
commit 358f5a5
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 20 deletions.
diff --git a/web/src/pages/_app.tsx b/web/src/pages/_app.tsx
@@ -1,11 +1,31 @@
 import { CSSReset, ThemeProvider } from "@chakra-ui/core";
 import theme from "../theme";
 import { ApolloProvider, InMemoryCache, ApolloClient } from "@apollo/client";
+import { PostsQuery, PaginatedPosts } from "../generated/graphql";
 
 const client = new ApolloClient({
   uri: process.env.NEXT_PUBLIC_API_URL as string,
   credentials: "include",
-  cache: new InMemoryCache(),
+  cache: new InMemoryCache({
+    typePolicies: {
+      Query: {
+        fields: {
+          posts: {
+            keyArgs: [],
+            merge(
+              existing: PaginatedPosts | undefined,
+              incoming: PaginatedPosts
+            ): PaginatedPosts {
+              return {
+                ...incoming,
+                posts: [...(existing?.posts || []), ...incoming.posts],
+              };
+            },
+          },
+        },
+      },
+    },
+  }),
 });
 
 function MyApp({ Component, pageProps }: any) {

diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx
@@ -70,26 +70,26 @@ const Index = () => {
                   cursor:
                     data.posts.posts[data.posts.posts.length - 1].createdAt,
                 },
-                updateQuery: (
-                  previousValue,
-                  { fetchMoreResult }
-                ): PostsQuery => {
-                  if (!fetchMoreResult) {
-                    return previousValue as PostsQuery;
-                  }
+                // updateQuery: (
+                //   previousValue,
+                //   { fetchMoreResult }
+                // ): PostsQuery => {
+                //   if (!fetchMoreResult) {
+                //     return previousValue as PostsQuery;
+                //   }
 
-                  return {
-                    __typename: "Query",
-                    posts: {
-                      __typename: "PaginatedPosts",
-                      hasMore: (fetchMoreResult as PostsQuery).posts.hasMore,
-                      posts: [
-                        ...(previousValue as PostsQuery).posts.posts,
-                        ...(fetchMoreResult as PostsQuery).posts.posts,
-                      ],
-                    },
-                  };
-                },
+                //   return {
+                //     __typename: "Query",
+                //     posts: {
+                //       __typename: "PaginatedPosts",
+                //       hasMore: (fetchMoreResult as PostsQuery).posts.hasMore,
+                //       posts: [
+                //         ...(previousValue as PostsQuery).posts.posts,
+                //         ...(fetchMoreResult as PostsQuery).posts.posts,
+                //       ],
+                //     },
+                //   };
+                // },
               });
             }}
             isLoading={loading}