Updated dependencies and fixed some caching issuse (fixed #66)

packages/backend/src/services/RottenTomatoes.ts

@@ -36,7 +36,7 @@ export default class RottenTomatoes {
     const state = stateMap[`${criticsScoreIcon.getAttribute('sentiment')}:${criticsScoreIcon.getAttribute('certified')}`]
     const consensus = dom.window.document.querySelector('#critics-consensus > p')?.textContent?.trim()
 
-    return state ?? score ? {state, score, consensus, link} : null
+    return (state && score) ? {state, score, consensus, link} : null
   }
 }
 

packages/frontend/package.json

@@ -7,18 +7,18 @@
     "graphql-type-gen": "graphql-codegen --config codegen.yml"
   },
   "dependencies": {
-    "@apollo/client": "^3.9.3",
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.8",
-    "@mui/lab": "^5.0.0-alpha.164",
-    "@mui/material": "^5.15.8",
-    "@mui/system": "^5.15.8",
+    "@apollo/client": "^3.10.4",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.19",
+    "@mui/lab": "^5.0.0-alpha.170",
+    "@mui/material": "^5.15.19",
+    "@mui/system": "^5.15.15",
     "@mui/x-data-grid": "^6.19.3",
-    "@preact/signals": "^1.2.2",
+    "@preact/signals": "^1.2.3",
     "@react-hook/throttle": "^2.2.0",
-    "apollo3-cache-persist": "^0.14.1",
-    "axios": "^1.6.7",
+    "apollo3-cache-persist": "^0.15.0",
+    "axios": "^1.7.2",
     "body-parser": "^1.20.2",
     "cookie": "^0.6.0",
     "country-list": "^2.3.0",
@@ -28,26 +28,26 @@
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "notistack": "alpha",
-    "preact": "^10.19.3",
+    "preact": "^10.22.0",
     "query-string": "^8.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.0",
-    "workbox-precaching": "^7.0.0",
-    "workbox-routing": "^7.0.0",
-    "workbox-strategies": "^7.0.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.23.1",
+    "workbox-precaching": "^7.1.0",
+    "workbox-routing": "^7.1.0",
+    "workbox-strategies": "^7.1.0"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.2",
-    "@graphql-codegen/typescript": "4.0.4",
-    "@graphql-codegen/typescript-operations": "^4.1.2",
-    "@graphql-codegen/typescript-react-apollo": "4.2.0",
+    "@graphql-codegen/typescript": "4.0.7",
+    "@graphql-codegen/typescript-operations": "^4.2.1",
+    "@graphql-codegen/typescript-react-apollo": "4.3.0",
     "@overdb/backend": "workspace:*",
     "@types/country-list": "^2.1.4",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20.11.16",
+    "@types/node": "^20.14.2",
     "esbuild-server": "^0.3.0",
     "graphql-tag": "^2.12.6",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.5"
   }
 }

packages/frontend/src/movieInfo/StreamingProviders.tsx

@@ -1,7 +1,7 @@
+import * as React from 'react'
 import { gql } from '@apollo/client'
 import styled from '@emotion/styled'
 import { Skeleton, Typography } from '@mui/material'
-import * as React from 'react'
 import { Movie, Provider, useGetStreamingProvidersQuery } from '../../types/graphql'
 import { ProviderLogo } from '../shared/general/Poster'
 
@@ -64,6 +64,7 @@ gql`
     movie(id: $id) {
       id
       providers {
+        id
         logo
         name
       }

packages/frontend/src/personInfo/PersonSummary.tsx

@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client'
+import {ApolloCache, gql} from '@apollo/client'
 import styled from '@emotion/styled'
 import FavoriteIcon from '@mui/icons-material/Favorite'
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'
@@ -7,11 +7,14 @@ import * as React from 'react'
 import { Person, useGetPersonInfoQuery, useSetFavouriteMutation } from '../../types/graphql'
 import { ErrorMessage, useMutationErrorHandler } from '../shared/errorHandlers'
 import { Poster } from '../shared/general/Poster'
-
+import refetchQueries from '../shared/refetchQueries';
 
 export function PersonSummary({id}: { id: Person['id'] }) {
   const {data, error: fetchError, loading: loadingPerson, refetch} = useGetPersonInfoQuery({variables: {id}})
-  const [setFavourite, {loading: loadingFavourite, error: mutationError}] = useSetFavouriteMutation({variables: {id, favourite: true}})
+  const [setFavourite, {loading: loadingFavourite, error: mutationError}] = useSetFavouriteMutation({
+    variables: {id, favourite: true},
+    update: refetchQueries(['user.favouritePeople'])
+  })
   useMutationErrorHandler(`Could not ${data?.person?.favourited ? 'unfavourite' : 'favourite'}`, mutationError)
 
   if (fetchError) {
@@ -41,7 +44,7 @@ export function PersonSummary({id}: { id: Person['id'] }) {
             style={{marginTop: 20}}
             variant="contained"
             startIcon={person.favourited ? <FavoriteIcon style={{color: 'red'}}/> : <FavoriteBorderIcon style={{color: 'red'}}/>}
-            onClick={() => setFavourite({variables: {id, favourite: !person.favourited}})}
+            onClick={() => setFavourite({variables: {id, favourite: !person.favourited}, refetchQueries: 'all'})}
           >
             {person.favourited ? 'Favourited' : 'Favourite'}
           </Button>
@@ -98,3 +101,4 @@ gql`
     }
   }
 `
+

packages/frontend/src/shared/movieActionButtons/SentimentSelect.tsx

@@ -5,6 +5,7 @@ import * as React from 'react'
 import { useState } from 'react'
 import { Movie, Sentiment, useSetSentimentMutation, useSetWatchedMutation } from '../../../types/graphql'
 import { useMutationErrorHandler } from '../errorHandlers'
+import refetchQueries from '../refetchQueries';
 
 interface SentimentSelectProps {
   id: Movie['id'];
@@ -25,7 +26,7 @@ export function SentimentSelect({id, sentiment, withLabel, placement}: Sentiment
     setAnchor(null)
     void setSentiment({
       variables: {id, sentiment},
-      refetchQueries: ['GetPersonCredits', 'GetWatchedMovies', 'GetWatchlist'],
+      update: refetchQueries(['user.likedMovies']),
       optimisticResponse: {
         setSentiment: {
           __typename: 'Movie',

packages/frontend/src/shared/movieActionButtons/WatchedButton.tsx

@@ -4,6 +4,7 @@ import { Button, Tooltip, Typography } from '@mui/material'
 import * as React from 'react'
 import { Movie, useSetWatchedMutation } from '../../../types/graphql'
 import { useMutationErrorHandler } from '../errorHandlers'
+import refetchQueries from '../refetchQueries';
 
 interface WatchedButtonProps {
   id: Movie['id'];
@@ -18,7 +19,7 @@ export function WatchedButton({id, watched, withLabel}: WatchedButtonProps) {
   function handleClick() {
     return setWatched({
       variables: {id, watched: !watched},
-      refetchQueries: ['GetPersonCredits', 'GetWatchedMovies', 'GetWatchlist'],
+      update: refetchQueries(['user.watched']),
       optimisticResponse: {
         setWatched: {
           __typename: "Movie",

packages/frontend/src/shared/refetchQueries.ts

@@ -0,0 +1,20 @@
+import {ApolloCache} from '@apollo/client';
+
+export default function refetchQueries(queryPaths: string[]) {
+  return (cache: ApolloCache<any>) => {
+    for (const queryPath of queryPaths) {
+      const [query, field] = queryPath.split('.', 1)
+      if (field) {
+        cache.modify({
+          id: 'ROOT_QUERY',
+          fields: {
+            [field]: obj => ({ ...obj, [field]: undefined })
+          }
+        });
+      } else {
+        cache.evict({ id: 'ROOT_QUERY', fieldName: query });
+      }
+    }
+    cache.gc()
+  }
+}