fix(webapp): clear series list cache when series status changed

So that when the user navigates to the series list page again, the query
will be re-fetched and will be up-to-date with the latest state.

Related to #71

apps/webapp/src/features/series/components/SeriesStatusSelect/SeriesStatusSelect.tsx

@@ -5,6 +5,7 @@ import { Button, Select, AlertDialog } from '#/components'
 import { type FragmentType, graphql, useFragment } from '#/generated/gql'
 import { UserSeriesStatus } from '#/generated/gql/graphql'
 import { useToast } from '#/hooks'
+import { invalidateCacheFields } from '#/lib/apollo'
 
 const STATUS_LABELS = {
   [UserSeriesStatus.InProgress]: 'In progress',
@@ -42,6 +43,9 @@ export const SeriesStatusSelect = ({
         }
       }
     `),
+    {
+      update: invalidateCacheFields(['userSeriesList']),
+    },
   )
 
   const [markSeriesEpisodesAsSeenMutate] = useMutation(

apps/webapp/src/lib/apollo.ts

@@ -1,4 +1,5 @@
 import {
+  type ApolloCache,
   ApolloClient,
   createHttpLink,
   InMemoryCache,
@@ -43,3 +44,23 @@ export const makeApolloClient = ({
 
   return apolloClient
 }
+
+/**
+ * Invalidate the give cache fields after after a mutation.
+ *
+ * Usage example:
+ * ```ts
+ * const [mutate] = useMutation(graphql(`...`), {
+ *   update: invalidateCacheFields(['userSeriesList']),
+ * })
+ * ```
+ */
+export const invalidateCacheFields =
+  (fields: string[]) => (cache: ApolloCache<unknown>) => {
+    cache.modify({
+      fields: fields.reduce<Record<string, () => void>>((acc, curr) => {
+        acc[curr] = () => undefined
+        return acc
+      }, {}),
+    })
+  }