deviana Posts

deviana

•Created by deviana on 11/12/2024 in #❓-help

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>
  );
}

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 />;
}

'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 />;
}

2 replies