Theo's Typesafe CultTTC
Theo's Typesafe Cult•14mo ago
deviana

tRPC Query Invalidation Issue with Client-Side Data Fetching and Initial Data from server component

I’m fetching data using tRPC and passing it to a client component as initial data. The client component then re-fetches the exact same data using tRPC with this initial data as the basis. However, the search field doesn’t seem to invalidate the query properly. Why might this be happening, and how can I ensure the query invalidates as expected?

This is the Server Component code
import { api } from '@/server/trpc/server';
import { DEFAULT_PAGE_SIZE } from '@/utils/constants';
import { Stack } from '@mantine/core';
import { Customers } from './customers';
import { Stats } from './stats';

export default async function CustomerPage() {
  const customers = await api.customers.list({
    filters: { search: '' },
    pagination: { page: 1, pageSize: DEFAULT_PAGE_SIZE },
  });

  return (
    <Stack>
      <Stats />

      <Customers initialData={customers} />
    </Stack>
  );
}


This is the Client Component code
'use client';

import type { customers } from '@/server/routers/customers';
import { api } from '@/server/trpc/react';
import { DEFAULT_PAGE_SIZE } from '@/utils/constants';
import { useInputState } from '@mantine/hooks';
import type { inferProcedureOutput } from '@trpc/server';
import { useState } from 'react';

export function Customers({
  initialData,
}: {
  initialData: inferProcedureOutput<typeof customers.list>;
}) {
  const [page] = useState(1);
  const [search] = useInputState('');
  const [pageSize] = useState(DEFAULT_PAGE_SIZE);

  const customers = api.customers.list.useQuery(
    {
      filters: { search },
      pagination: { pageSize, page },
    },
    { initialData },
  );

  console.log(customers.data);

  return <div />;
}
Was this page helpful?