deviana Posts - Answer Overflow

deviana

Explore posts from servers

TtRPC TTCTheo's Typesafe Cult DTDrizzle Team

•Created by deviana on 11/12/2024 in #questions

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

TtRPC

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

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

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

DTDrizzle Team

•Created by deviana on 8/11/2024 in #help

Querying Students Enrolled in Courses by a Specific Instructor Using Drizzle

In Drizzle, suppose you have four tables: students, courses, enrollments, and instructors. The enrollments table represents a many-to-many relationship between courses and students, and each course is associated with an instructor. How would you write a Drizzle query to fetch all students who are enrolled in a course taught by a specific instructor?

1 replies

TTCTheo's Typesafe Cult

•Created by deviana on 7/6/2024 in #questions

should we stop using useMemo and useCallback in react v19?

And is it safe to remove my old useMemo and useCallback?

6 replies

TTCTheo's Typesafe Cult

•Created by deviana on 6/24/2024 in #questions

Multi-tenant in Next.js, How to delay the creation of the Drizzle client

2 replies

TTCTheo's Typesafe Cult

•Created by deviana on 6/15/2024 in #questions

How to invalidate query made by trpc inside a RSC

In the root page which is a server component, I have fetched some data like this

const posts = await api.posts.list({});

const posts = await api.posts.list({});

And I have passed the posts into another component that is a client component, so when we update a post from that client component how can we invalidate the posts in the root page important notes - I have used create-t3-app - in the root page I have used api imported from @/trpc/server - in the client component I have used api imported from @/trpc/react

10 replies

TTCTheo's Typesafe Cult

•Created by deviana on 6/13/2024 in #questions

invalidate data fetched from server component

Using server components, imagine you have awated some data from an api and down the road you have mutate this data, is there any way that you can mutate it like has been doing in react-query when we queryClient.invalidteQueries()

12 replies

TTCTheo's Typesafe Cult

•Created by deviana on 6/12/2024 in #questions

Error: Unable to find tRPC Context. Did you forget to wrap your App inside `withTRPC` HoC?

I have created a brand new project with t3-app using next.js and trpc with app router

const update = api.users.update.useMutation({});

I have faced this issue when the component that contains the above code get mounted and the issue pointing on .useMutation()

5 replies

TTCTheo's Typesafe Cult

•Created by deviana on 6/10/2024 in #questions

Next.js with Socket.io server

I am trying to setup a socket.io server with the next.js app, I have bootstrapped the creation of the app using create-t3-app, I have found this official guide https://socket.io/how-to/use-with-nextjs but I am having a typescript issue in this part const httpServer = createServer(handler); telling me Promise returned in function argument where a void return was expected.

1 replies

TTCTheo's Typesafe Cult

•Created by deviana on 5/19/2023 in #questions

How to use trpc inside next.js middleware

What is the best way to use trpc inside next.js middleware

2 replies

TTCTheo's Typesafe Cult

•Created by deviana on 5/19/2023 in #questions

How to set cookies from trpc backend using next.js

I need to set a cookie from the backend of trpc in next.js

7 replies

Gaming

Programming