stanisław Comments - Answer Overflow

Hi @cupofcrypto I am just starting on implementing next auth with an external rest api. Do you mind sharing some resources that you used throught the process or maybe some code examples?

11 replies

TTCTheo's Typesafe Cult

•Created by stanisław on 1/17/2024 in #questions

Infinite query with app router initial data

Idk

8 replies

TTCTheo's Typesafe Cult

•Created by stanisław on 1/17/2024 in #questions

Infinite query with app router initial data

And we are not loading all the data so the cursors must be mismatched or so

8 replies

TTCTheo's Typesafe Cult

•Created by stanisław on 1/17/2024 in #questions

Infinite query with app router initial data

On the first render items are in an order X then after a short time they swap

8 replies

TTCTheo's Typesafe Cult

•Created by stanisław on 1/17/2024 in #questions

Infinite query with app router initial data

And initially I am passing thata from the server component like that

  const initialData = await api.items.getAll.query({
    query: searchParams?.query,
    style: searchParams?.style
  });

      <ClientComponent initialData={initialData} />

  const initialData = await api.items.getAll.query({
    query: searchParams?.query,
    style: searchParams?.style
  });

      <ClientComponent initialData={initialData} />

8 replies

TTCTheo's Typesafe Cult

•Created by stanisław on 1/17/2024 in #questions

Infinite query with app router initial data

and thats my trpc return

const items = await ctx.db.items.findMany({
    cursor: input.cursor ? { id: input.cursor } : undefined,
    take: take,
    skip: input.cursor ? 1 : 0,
    where
  });

  let nextCursor: typeof input.cursor;

  if (items.length === take) {
    const nextItem = items.at(-1);

    nextCursor = nextItem?.id;
  }

 return {
    items,
    cursor: nextCursor
  };

const items = await ctx.db.items.findMany({
    cursor: input.cursor ? { id: input.cursor } : undefined,
    take: take,
    skip: input.cursor ? 1 : 0,
    where
  });

  let nextCursor: typeof input.cursor;

  if (items.length === take) {
    const nextItem = items.at(-1);

    nextCursor = nextItem?.id;
  }

 return {
    items,
    cursor: nextCursor
  };

8 replies

TTCTheo's Typesafe Cult

•Created by stanisław on 1/17/2024 in #questions

Infinite query with app router initial data

Thats my client usage

  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
    api.bestItems.getAll.useInfiniteQuery(
      {
        query: searchParams.get('query') ?? undefined,
        style: searchParams.get('style') ?? undefined
      },
      {
        initialData: {
          pageParams: [initialData.cursor],
          pages: [initialData]
        },
        getNextPageParam: (lastPage) => lastPage.cursor
      }
    );

  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
    api.bestItems.getAll.useInfiniteQuery(
      {
        query: searchParams.get('query') ?? undefined,
        style: searchParams.get('style') ?? undefined
      },
      {
        initialData: {
          pageParams: [initialData.cursor],
          pages: [initialData]
        },
        getNextPageParam: (lastPage) => lastPage.cursor
      }
    );

8 replies

TTCTheo's Typesafe Cult

•Created by stanisław on 11/1/2023 in #questions

trpc error throwing and catching on the client

error instanceof TRPCError however does what I want but the error thrown by useQuery is not instance of TRPCError 😄

3 replies

TTCTheo's Typesafe Cult

•Created by Yuvaraj on 5/18/2023 in #questions

Context in App dir

which consume context

10 replies

TTCTheo's Typesafe Cult

•Created by Yuvaraj on 5/18/2023 in #questions

Context in App dir

And only create small client components

10 replies

TTCTheo's Typesafe Cult

•Created by Yuvaraj on 5/18/2023 in #questions

Context in App dir

Yes

10 replies

TTCTheo's Typesafe Cult

•Created by Yuvaraj on 5/18/2023 in #questions

Context in App dir

Context cannot be used in server components, they are not meant to be interactive.

'use client';
 
import { ThemeProvider } from 'acme-theme';
import { AuthProvider } from 'acme-auth';
 
export function Providers({ children }) {
  return (
    <ThemeProvider>
      <AuthProvider>{children}</AuthProvider>
    </ThemeProvider>
  );
}

'use client';
 
import { ThemeProvider } from 'acme-theme';
import { AuthProvider } from 'acme-auth';
 
export function Providers({ children }) {
  return (
    <ThemeProvider>
      <AuthProvider>{children}</AuthProvider>
    </ThemeProvider>
  );
}