TanStack Query v5とNext.js 15: Optimistic Updates、Cache Sync、Server Actions

'use client';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import React from 'react';

// Create a client
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // Aggressively refetch on mount to ensure data freshness,
      // especially after server-side revalidation.
      staleTime: 5 * 1000, // 5 seconds
      refetchOnWindowFocus: true,
      refetchOnMount: true,
      refetchOnReconnect: true,
    },
  },
});

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <HydrationBoundary state={dehydrate(queryClient)}>
        {children}
      </HydrationBoundary>
    </QueryClientProvider>
  );
}

import { QueryClient, HydrationBoundary, dehydrate } from '@tanstack/react-query';
import { Providers } from './providers';
import { getPosts } from '@/lib/data'; // Example data fetching function

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const queryClient = new QueryClient();

  // Prefetch data on the server
  await queryClient.prefetchQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
  });

  return (
    <html lang="en">
      <body>
        <Providers>
          <HydrationBoundary state={dehydrate(queryClient)}>
            {children}
          </HydrationBoundary>
        </Providers>
      </body>
    </html>
  );
}

'use server';

import { revalidatePath, revalidateTag } from 'next/cache';
import { Post } from '@/lib/types'; // Assume Post type is defined

let posts: Post[] = [
  { id: '1', title: 'Initial Post', content: 'This is the first post.' },
];
let nextId = 2;

export async function addPostAction(title: string, content: string): Promise<Post> {
  // Simulate network delay
  await new Promise((resolve) => setTimeout(resolve, Math.random() * 1000 + 500));

  // Simulate an error 20% of the time
  if (Math.random() < 0.2) {
    throw new Error('Failed to add post: Network error or server issue.');
  }

  const newPost: Post = { id: String(nextId++), title, content };
  posts.unshift(newPost); // Add to the beginning for easier optimistic update
  console.log('Server: Added post', newPost);

  // Invalidate Next.js cache for the path where posts are displayed
  revalidatePath('/posts');
  revalidateTag('posts'); // Invalidate a specific tag if used

  return newPost;
}

export async function getPosts(): Promise<Post[]> {
  // Simulate network delay
  await new Promise((resolve) => setTimeout(resolve, 300));
  return posts;
}

'use client';

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { addPostAction, getPosts } from '@/app/actions';
import { Post } from '@/lib/types'; // Assume Post type is defined
import { useState } from 'react';

export default function PostsPage() {
  const queryClient = useQueryClient();
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const { data: posts, isLoading, isError, error } = useQuery<Post[]>({
    queryKey: ['posts'],
    queryFn: getPosts,
  });

  const addPostMutation = useMutation({
    mutationFn: async ({ title, content }: { title: string; content: string }) => {
      return addPostAction(title, content);
    },
    onMutate: async (newPostData) => {
      // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
      await queryClient.cancelQueries({ queryKey: ['posts'] });

      // Snapshot the previous value
      const previousPosts = queryClient.getQueryData<Post[]>(['posts']);

      // Optimistically update to the new value
      queryClient.setQueryData<Post[]>(['posts'], (old) => {
        const tempId = `optimistic-${Date.now()}`; // Temporary ID for optimistic item
        const optimisticPost: Post = { ...newPostData, id: tempId };
        return old ? [optimisticPost, ...old] : [optimisticPost];
      });

      // Return a context object with the snapshotted value
      return { previousPosts };
    },
    onError: (err, newPostData, context) => {
      // If the mutation fails, use the context for an immediate rollback
      console.error('Optimistic update failed:', err);
      queryClient.setQueryData(['posts'], context?.previousPosts);
      // Optionally, show a toast notification
      alert(`Failed to add post: ${err.message}`);
    },
    onSettled: () => {
      // Always refetch after error or success:
      // This ensures our client-side cache is eventually consistent with the server.
      // It also handles cases where the server-side revalidation might not immediately
      // propagate to the client's data fetching mechanism (e.g., if the client
      // is still using stale data from its own cache).
      queryClient.invalidateQueries({ queryKey: ['posts'] });
    },
    onSuccess: (data) => {
      // Optionally, if the server returns the full updated list or a specific ID,
      // you could update the optimistic item with the real ID.
      // For simplicity, `onSettled`'s `invalidateQueries` handles this.
      console.log('Post added successfully:', data);
      setTitle('');
      setContent('');
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!title || !content) return;
    addPostMutation.mutate({ title, content });
  };

  if (isLoading) return <div>Loading posts...</div>;
  if (isError) return <div>Error: {error?.message}</div>;

  return (
    <div className="max-w-2xl mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Posts</h1>

      <form onSubmit={handleSubmit} className="mb-8 p-4 border rounded-lg shadow-sm">
        <h2 className="text-xl font-semibold mb-3">Add New Post</h2>
        <div className="mb-3">
          <label htmlFor="title" className="block text-sm font-medium text-gray-700">Title</label>
          <input
            type="text"
            id="title"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2"
            disabled={addPostMutation.isPending}
          />
        </div>
        <div className="mb-3">
          <label htmlFor="content" className="block text-sm font-medium text-gray-700">Content</label>
          <textarea
            id="content"
            value={content}
            onChange={(e) => setContent(e.target.value)}
            rows={3}
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2"
            disabled={addPostMutation.isPending}
          ></textarea>
        </div>
        <button
          type="submit"
          className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
          disabled={addPostMutation.isPending}
        >
          {addPostMutation.isPending ? 'Adding...' : 'Add Post'}
        </button>
        {addPostMutation.isError && (
          <p className="text-red-500 text-sm mt-2">Error: {addPostMutation.error?.message}</p>
        )}
      </form>

      <div className="space-y-4">
        {posts?.map((post) => (
          <div key={post.id} className="p-4 border rounded-lg shadow-sm bg-white">
            <h3 className="text-lg font-semibold">{post.title}</h3>
            <p className="text-gray-600">{post.content}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

// ... (previous actions)

export async function getPaginatedPosts(pageParam: number, limit: number = 5): Promise<{ posts: Post[]; nextPage: number | undefined }> {
  await new Promise((resolve) => setTimeout(resolve, 500)); // Simulate network delay

  const startIndex = (pageParam - 1) * limit;
  const endIndex = startIndex + limit;
  const paginatedPosts = posts.slice(startIndex, endIndex);

  const nextPage = endIndex < posts.length ? pageParam + 1 : undefined;

  return { posts: paginatedPosts, nextPage };
}

'use client';

import { useInfiniteQuery } from '@tanstack/react-query';
import { getPaginatedPosts } from '@/app/actions';
import { Post } from '@/lib/types';
import { useEffect, useRef } from 'react';

export default function InfinitePostsPage() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isLoading,
    isError,
    error,
  } = useInfiniteQuery({
    queryKey: ['infinitePosts'],
    queryFn: ({ pageParam }) => getPaginatedPosts(pageParam as number),
    initialPageParam: 1,
    getNextPageParam: (lastPage) => lastPage.nextPage,
    staleTime: 1000 * 60 * 5, // 5 minutes
    gcTime: 1000 * 60 * 60, // 1 hour
  });

  const observerTarget = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!observerTarget.current) return;

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
          fetchNextPage();
        }
      },
      { threshold: 1 }
    );

    observer.observe(observerTarget.current);

    return () => {
      if (observerTarget.current) {
        observer.unobserve(observerTarget.current);
      }
    };
  }, [fetchNextPage, hasNextPage, isFetchingNextPage]);

  if (isLoading) return <div>Loading infinite posts...</div>;
  if (isError) return <div>Error: {error?.message}</div>;

  const allPosts = data?.pages.flatMap((page) => page.posts) || [];

  return (
    <div className="max-w-2xl mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Infinite Posts</h1>
      <div className="space-y-4">
        {allPosts.map((post) => (
          <div key={post.id} className="p-4 border rounded-lg shadow-sm bg-white">
            <h3 className="text-lg font-semibold">{post.title}</h3>
            <p className="text-gray-600">{post.content}</p>
          </div>
        ))}
      </div>
      <div ref={observerTarget} className="h-1 bg-transparent my-4" />
      {isFetchingNextPage && <div className="text-center py-2">Loading more...</div>}
      {!hasNextPage && allPosts.length > 0 && (
        <div className="text-center py-2 text-gray-500">No more posts to load.</div>
      )}
    </div>
  );
}

// ... (previous actions)

// Example of how you might tag a fetch request if you were fetching directly
// async function getPostsFromAPI(): Promise<Post[]> {
//   const res = await fetch('https://api.example.com/posts', { next: { tags: ['posts'] } });
//   if (!res.ok) throw new Error('Failed to fetch posts');
//   return res.json();
// }

// Our current `getPosts` is a direct function call, so `revalidateTag`
// in `addPostAction` directly invalidates the tag, assuming Next.js
// tracks this for Server Actions. For `fetch` calls, explicit tagging is needed.
// For simplicity in this example, `revalidateTag('posts')` is called,
// implying that any data fetching mechanism that Next.js tracks under 'posts'
// will be invalidated. In a real app, ensure your data fetching is tagged.