Get initialData/server updates for useQuery with staletime: Infinity

[codinginflow]

I have this optimistic like button. In order to not have many like buttons refetch their state, I have set staleTime to Infinity.

The initialState is coming from the server-side fetch of the whole feed. This feed has revalidations enabled.

Is there a way to update the like query whenever initialState changes? Should I use useEffect + setQueryData?

interface LikeButtonProps {
  postId: string;
  initialState: LikeInfo;
}

export default function LikeButton({ postId, initialState }: LikeButtonProps) {
  const { toast } = useToast();

  const queryClient = useQueryClient();

  const { data } = useQuery({
    queryKey: ["like-info", postId],
    queryFn: () =>
      kyInstance.get(`/api/posts/${postId}/likes`).json<LikeInfo>(),
    initialData: initialState,
    staleTime: Infinity,
  });

  const { mutate } = useMutation({
    mutationFn: () =>
      data.isLikedByUser
        ? kyInstance.delete(`/api/posts/${postId}/likes`)
        : kyInstance.post(`/api/posts/${postId}/likes`),
[...]
}