Tanstack Query による 2 パターンのページネーション設計

import React, { useState, useCallback } from 'react';

const RepoList: React.FC = () => {
  const [page, setPage] = useState(1);

  const { data, isLoading, isError, error, isPlaceholderData } = useQuery
    Repository[],
    Error
  >({
    queryKey: ['repos', { page }],
    queryFn: () => fetchRepos(page),
    placeholderData: (previousData) => previousData,
    staleTime: 10 * 1000,
  });

  
  const handlePageChange = useCallback((newPage: number) => {
    setPage(newPage);
  }, []);

  
  const isLastPage = data && data.length  PAGE_SIZE;

  if (isLoading && !isPlaceholderData) {
    return div>読み込み中...div>;
  }

  if (isError) {
    return div>エラーが発生しました: {error?.message}div>;
  }

  return (
    >
      {}
      {isPlaceholderData && span>更新中...span>}

      {}
      div style={{ opacity: isPlaceholderData ? 0.7 : 1 }}>
        {data?.map((repo) => (
          div key={repo.id}>
            h3>{repo.full_name}h3>
            {repo.description && p>{repo.description}p>}
            span>⭐ {repo.stargazers_count.toLocaleString()}span>
          div>
        ))}
      div>

      {}
      >
        button
          onClick={() => handlePageChange(page - 1)}
          disabled={page === 1 || isPlaceholderData}
        >
          前のページ
        button>

        span>
          ページ {page}
          {isPlaceholderData && span>(更新中)span>}
        span>

        button
          onClick={() => handlePageChange(page + 1)}
          disabled={isLastPage || isPlaceholderData}
        >
          次のページ
        button>
      >
    >
  );
};

export default RepoList;

import {
  UseQueryOptions,
  useQuery,
  useQueryClient,
} from '@tanstack/react-query';
import { useCallback } from 'react';
import { Repository, fetchRepos } from '../api';


type RepositoryQueryKey = readonly ['repos', 'list', { page: number }];


export const repositoryQueries = {
  
  all: () => ['repos'] as const,
  
  lists: () => [...repositoryQueries.all(), 'list'] as const,
  
  list: (filters: { page: number }) =>
    [...repositoryQueries.lists(), filters] as const,
  
  details: () => [...repositoryQueries.all(), 'detail'] as const,
  
  detail: (id: number) => [...repositoryQueries.details(), id] as const,
};


function createRepositoryQueryOptions(
  page: number
): UseQueryOptionsRepository[], Error, Repository[], RepositoryQueryKey> {
  return {
    queryKey: repositoryQueries.list({ page }),
    queryFn: async (): PromiseRepository[]> => {
      const result = await fetchRepos(page);

      
      if (process.env.NODE_ENV === 'development') {
        
        const isValidRepository = (obj: any): obj is Repository => {
          return (
            typeof obj === 'object' &&
            typeof obj.id === 'number' &&
            typeof obj.full_name === 'string' &&
            typeof obj.stargazers_count === 'number'
          );
        };

        if (!Array.isArray(result) || !result.every(isValidRepository)) {
          throw new Error('Invalid repository data received from API');
        }
      }

      return result;
    },
    staleTime: 10 * 1000,
  };
}


type QueryResultT> = {
  data: T | undefined;
  isLoading: boolean;
  isError: boolean;
  error: Error | null;
};


export function useTypedRepos(page: number): QueryResultRepository[]> & {
  isPlaceholderData: boolean;
  prefetchNext: () => Promisevoid>;
  prefetchPrevious: () => Promisevoid>;
} {
  const queryClient = useQueryClient();

  const query = useQuery({
    ...createRepositoryQueryOptions(page),
    placeholderData: (previousData) => previousData,
  });

  
  const prefetchNext = useCallback(async () => {
    await queryClient.prefetchQuery(createRepositoryQueryOptions(page + 1));
  }, [queryClient, page]);

  
  const prefetchPrevious = useCallback(async () => {
    if (page > 1) {
      await queryClient.prefetchQuery(createRepositoryQueryOptions(page - 1));
    }
  }, [queryClient, page]);

  return {
    ...query,
    prefetchNext,
    prefetchPrevious,
    isPlaceholderData: query.isPlaceholderData ?? false,
  };
}

import { useReducer, useMemo } from 'react';


interface PaginationState {
  readonly page: number;
  readonly isFirstPage: boolean;
  readonly isLastPage: boolean;
}


type PaginationAction =
  | { type: 'NEXT_PAGE' }
  | { type: 'PREVIOUS_PAGE' }
  | { type: 'GO_TO_PAGE'; page: number }
  | { type: 'SET_LAST_PAGE'; isLastPage: boolean };


function paginationReducer(
  state: PaginationState,
  action: PaginationAction
): PaginationState {
  switch (action.type) {
    case 'NEXT_PAGE':
      if (state.isLastPage) return state; 
      return {
        ...state,
        page: state.page + 1,
        isFirstPage: false,
      };

    case 'PREVIOUS_PAGE':
      if (state.isFirstPage || state.page  1) return state; 
      const newPage = Math.max(1, state.page - 1); 

      return {
        ...state,
        page: newPage,
        isFirstPage: newPage  1,
        isLastPage: false,
      };

    case 'GO_TO_PAGE':
      return {
        ...state,
        page: Math.max(1, action.page), 
        isFirstPage: action.page  1,
      };

    case 'SET_LAST_PAGE':
      return {
        ...state,
        isLastPage: action.isLastPage,
      };

    default:
      return state;
  }
}


export function usePaginationState(initialPage: number = 1) {
  const safePage = Math.max(1, initialPage);

  const [state, dispatch] = useReducer(paginationReducer, {
    page: safePage,
    isFirstPage: safePage  1,
    isLastPage: false,
  });

  
  const actions = useMemo(
    () => ({
      
      nextPage: () => dispatch({ type: 'NEXT_PAGE' }),
      
      previousPage: () => dispatch({ type: 'PREVIOUS_PAGE' }),
      
      goToPage: (page: number) => dispatch({ type: 'GO_TO_PAGE', page }),
      
      setLastPage: (isLastPage: boolean) =>
        dispatch({ type: 'SET_LAST_PAGE', isLastPage }),
    }),
    []
  );

  return [state, actions] as const;
}

import React, { useCallback, useMemo } from 'react';
import { Repository, PAGE_SIZE } from '../api';
import { useTypedRepos } from '../hooks/useTypedRepos';
import { usePaginationState } from '../hooks/usePaginationState';

type RepoListProps = {
  onRepositoryClick?: (repo: Repository) => void;
};

const OptimizedRepoList: React.FCRepoListProps> = ({ onRepositoryClick }) => {
  
  const [paginationState, paginationActions] = usePaginationState();
  const { page, isFirstPage } = paginationState;

  
  const { data, isPlaceholderData, status, prefetchNext, prefetchPrevious } =
    useTypedRepos(page);

  const handleNextPage = useCallback(() => {
    if (!isPlaceholderData && data && data.length === PAGE_SIZE) {
      paginationActions.nextPage();
      prefetchNext(); 
    }
  }, [isPlaceholderData, data, paginationActions, prefetchNext]);

  const handlePreviousPage = useCallback(() => {
    if (!isPlaceholderData && !isFirstPage) {
      paginationActions.previousPage();
      prefetchPrevious(); 
    }
  }, [isPlaceholderData, isFirstPage, paginationActions, prefetchPrevious]);

  
  const isLastPage = useMemo(() => {
    const isLast = data && data.length  PAGE_SIZE;
    if (isLast !== paginationState.isLastPage) {
      paginationActions.setLastPage(!!isLast);
    }
    return !!isLast;
  }, [data, paginationState.isLastPage, paginationActions]);

  
  const renderRepository = useCallback(
    (repo: Repository) => (
      li key={repo.id} onClick={() => onRepositoryClick?.(repo)}>
        h3>{repo.full_name}h3>
        p>{repo.description || 'No description'}p>
        div>
          span>⭐span>
          span>{repo.stargazers_count.toLocaleString()}span>
        div>
      li>
    ),
    [onRepositoryClick]
  );

  if (status === 'pending' && !data) {
    return div>読み込み中...div>;
  }

  if (status === 'error') {
    return div>エラーが発生しましたdiv>;
  }

  return (
    >
      {}
      ul style={{ opacity: isPlaceholderData ? 0.7 : 1 }}>
        {data?.map(renderRepository)}
      ul>

      {}
      >
        button
          onClick={handlePreviousPage}
          disabled={isPlaceholderData || isFirstPage}
        >
          前のページ
        button>

        span>
          ページ {page}
          {isPlaceholderData && span>(読み込み中...)span>}
        span>

        button
          onClick={handleNextPage}
          disabled={isPlaceholderData || isLastPage}
        >
          次のページ
        button>
      >
    >
  );
};

export default OptimizedRepoList;