seeding-the-query-cache

import { createQueryKeys } from '@lukemorales/query-key-factory';
import { infiniteQueryOptions, QueryClient, useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
import { getBoards } from '@/server/actions';

const boards = createQueryKeys('boards', {
  list: {
    queryKey: null
  }
});

export const getBoardsQueryOptions = (queryClient: QueryClient) =>
  infiniteQueryOptions({
    ...boards.list,
    queryFn: async context => {
      const res = await getBoards(context.pageParam);
      //seeding here using queryClient
      return res;
    },
    initialPageParam: 1,
    getNextPageParam: page => page.meta.nextCursor
  });

export const useBoards = () => {
  const queryClient = useQueryClient();
  return useInfiniteQuery(getBoardsQueryOptions(queryClient));
};

import { ReactNode } from 'react';
import { Metadata } from 'next';
import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
import { getBoardsQueryOptions } from '@/services/queries/boards';
import MainLayout from '@/components/layouts/main-layout';
import dbConnect from '@/server/db-connect';

export const metadata: Metadata = {
  title: 'Kanban Task Management App',
  description: 'Generated by create next app'
};

export default async function BoardsLayout({ children }: { children: ReactNode }) {
  const queryClient = new QueryClient();
  await queryClient.prefetchInfiniteQuery(getBoardsQueryOptions(queryClient));

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <MainLayout>{children}</MainLayout>
    </HydrationBoundary>
  );
}