Can manage to understand optimistic update.

  const addCardToCollection = ({
    card,
    collectionId,
    userId,
  }: {
    card: Database['public']['Tables']['cards']['Row']
    collectionId: Database['public']['Tables']['collections']['Row']['id']
    userId: string
  }) => {
    const queryClient = useQueryClient()
    const { mutate } = useMutation({
      mutationFn: async () => {
        const res = await cardToCollection({
          cardId: card.id,
          collectionId,
          userId,
        })
        // ---^ Return an object with count/data/error/status/statusText properties

        return res
      },
      onMutate: async data => {
        await queryClient.cancelQueries(['view_collection'])

        console.log(data)
        // ----------^ Return undefined
      },
      onSettled: () => {
        queryClient.invalidateQueries({ queryKey: ['view_collection'] })
      },
    })

    return {
      mutate,
    }
  }

  const addCardToCollection = ({
    card,
    collectionId,
    userId,
  }: {
    card: Database['public']['Tables']['cards']['Row']
    collectionId: Database['public']['Tables']['collections']['Row']['id']
    userId: string
  }) => {
    const queryClient = useQueryClient()
    const { mutate } = useMutation({
      mutationFn: async () => {
        const res = await cardToCollection({
          cardId: card.id,
          collectionId,
          userId,
        })
        // ---^ Return an object with count/data/error/status/statusText properties

        return res
      },
      onMutate: async data => {
        await queryClient.cancelQueries(['view_collection'])

        console.log(data)
        // ----------^ Return undefined
      },
      onSettled: () => {
        queryClient.invalidateQueries({ queryKey: ['view_collection'] })
      },
    })

    return {
      mutate,
    }
  }