Component outside view not optimistically updating

[antonycaporossi]

Hello everyone,
I am still a beginner so I apologize in advance.

I have a set of items that can be added to favorites via the FavoriteButton component.

I am using React Query to synchronize this with the database.

FavoriteButton

'use client';
import { StarIcon } from '@heroicons/react/24/outline';
import { StarIcon as StarIconSolid } from '@heroicons/react/24/solid';
import Button from '@/src/components/Common/Button';
import useFavorites from '@/src/hooks/favorites/useFavorites';
import useFavoritesMutations from '@/src/hooks/favorites/useFavoritesMutations';

function FavoriteButton({issue }) {

  const { data: favorites, isLoading} = useFavorites()
  const { addIssue, removeIssue } = useFavoritesMutations()

  if (isLoading) return null
  
  const isInFavorites = favorites.some((fav) => fav.id === issue.id);
  console.log(favorites)
  const handleAddToFavorites = () => {
    addIssue.mutate(issue);
  };

  const handleRemoveFromFavorites = () => {
    removeIssue.mutate(issue);
  };
  

  return (
    <div>
      {isInFavorites ? (
        <Button
          buttonType={'default'}
          className={`z-40 items-center justify-center h-full`}
          buttonSize={'sm'}
          onClick={handleRemoveFromFavorites}
        >
          <StarIconSolid className="h-3 text-amber-300" />
        </Button>
      ) : (
        <Button
          buttonType={'ghost'}
          className={`z-40 items-center justify-center hover:bg-slate-400 h-full`}
          buttonSize={'sm'}
          onClick={handleAddToFavorites}
        >
          <StarIcon className="h-3 text-amber-300" />
        </Button>
      )}
    </div>
  );
}

export default FavoriteButton;

useFavorites

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

const fetchFavorites = async () => {
    const response = await axios.request(
        {
            method: 'GET',
            url: `${process.env.NEXT_PUBLIC_API_BASE_URL}/series/issues/favorites`
        }
    )
    return response.data
}

const useFavorites = () => {
    return useQuery({
      queryKey: ['favorites'],
      queryFn: fetchFavorites, // Function that fetches the favorites
      cacheTime: 1000 * 60 * 60, // 1 hour
      staleTime: 1000 * 60 * 5,  // 5 minutes
    });
  };
  
export default useFavorites

useFavoritesMutations

import { useMutation, useQueryClient } from "@tanstack/react-query";
import axios from "axios";

const addIssueToFavoritesServer = async (issue) => {
  
    try {
      const response = await axios.request({
        headers: {
          Authorization: `Bearer ${process.env.NEXT_PUBLIC_JWT_TOKEN}`,
        },
        method: 'PUT',
        url: `${process.env.NEXT_PUBLIC_API_BASE_URL}/series/issues/favorites/${issue.id}`,
      });
  

      return response.data;
    } catch (error) {

      throw error; // Re-throw the error so it can be handled by the mutation
    }
  };
  

const removeIssueFromFavoritesServer = async (issue) => {
    const response = await axios.request(
        {
            headers: {
                Authorization: `Bearer ${process.env.NEXT_PUBLIC_JWT_TOKEN}`,
            },
            method: 'DELETE',
            url: `${process.env.NEXT_PUBLIC_API_BASE_URL}/series/issues/favorites/${issue.id}`
        }
    )
    return response.data
}

const useFavoritesMutations = () => {
    const queryClient = useQueryClient()
    const addIssue = useMutation({
        mutationFn: addIssueToFavoritesServer,
        onMutate: async (issue) => {
          await queryClient.cancelQueries({ queryKey: ['favorites'] });
          const previousFavorites = queryClient.getQueryData(['favorites']);

          queryClient.setQueryData(['favorites'], (old) => {
            if (!old){
              return [issue]
            }
            return [...old, issue];
          });
          return { previousFavorites };
        },
      
        onError: ({error, context}) => {
          if (context?.previousFavorites) {
            queryClient.setQueryData(['favorites'], context.previousFavorites);
          }
        },
      
        onSettled: () => {
          queryClient.invalidateQueries({ queryKey: ['favorites'] });
        },
      });
    return {addIssue}
}

export default useFavoritesMutations

When i load the page i can add the items to favoriteList without problems.
If I scroll down the page and new items are mounted then the button stops working.

The database receives the data and inserts the data but the button does not change state since here

          queryClient.setQueryData(['favorites'], (old) => {
            if (!old){
              return [issue]
            }
            return [...old, issue];
          });

old is undefined for those items and so the cache not getting updated.

I hope I have explained myself well.

What could be the cause? Am I doing something wrong?