Sz Posts - Answer Overflow

Explore posts from servers

•Created by Sz on 2/13/2024 in #questions

What exactly does `unstable_noStore` do?

I'm developing on the t3 stack with clerk as the auth. When I try to call one of my protected endpoints, I get the following error when building

[cause]: a [Error]: Dynamic server usage: Page couldn't be rendered statically because it used `headers`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error

[cause]: a [Error]: Dynamic server usage: Page couldn't be rendered statically because it used `headers`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error

I don't really understand why this error occurs when only the auth method is being used from Clerk in the trpc context, but using unstable_nostore in the components that do call the endpoints, fixes this issue. Does anyone know what exactly is going on here?

3 replies

TTCTheo's Typesafe Cult

•Created by Sz on 1/31/2024 in #questions

Is it possible to create a component named Home in a NextJS project?

As the title states, I've been messing around with this one page I ported over from v0 and named the component Home. When I tried to import the component over to a page, it would stall and then eventually give a Maxium call stack error. Though I noticed that if I renamed it from Home to something else, the issue would be resolved and it would render properly. Does anyone know what's going on here? For context, It's a T3 app, but then stripped the parts from create-next-app so that it supports bunx v0 add functionality.

2 replies

TTCTheo's Typesafe Cult

•Created by Sz on 12/13/2023 in #questions

Is it possible to pass access tokens to react server components?

I have an access token that's stored in local storage. Using the access token in client components is no problem since it has access to window, but for react server components this isn't the case. Is there a way to pass in access tokens into react server components? Such as through a custom header?

4 replies

TTCTheo's Typesafe Cult

•Created by Sz on 12/12/2023 in #questions

Adding Custom Headers in trpc using local storage

Hey all, I'm trying to get add custom headers on the client side api of trpc, but have been struggling to do so. Right now the setup currently looks like this

export function TRPCReactProvider(props: {
  children: React.ReactNode;
  cookies: string;
}) {
  const [queryClient] = useState(() => new QueryClient());
  const [header, setHeader] = useState<string>("");
  console.log("trpc react => api key: ", apiKey);

  const [trpcClient] = useState(() =>
    api.createClient({
      transformer,
      links: [
        loggerLink({
          enabled: (op) =>
            process.env.NODE_ENV === "development" ||
            (op.direction === "down" && op.result instanceof Error),
        }),
        unstable_httpBatchStreamLink({
          url: getUrl(),
          headers() {
            return {
              cookie: props.cookies,
              "x-trpc-source": "react",
              "x-header-key": header,
            };
          },
        }),
      ],
    })
  );

  useEffect(() => {
    setHeader(localStorage.getItem("header-item"));

    const fetchHeaderItem = () => {
      setApiKey(localStorage.getItem("header-item"));
    }

    window.addEventListener("header-item-storage-event", fetchHeaderItem);

    return () => {
      window.removeEventListener("header-item-storage-event", fetchHeaderItem);
    }
  }, []);

export function TRPCReactProvider(props: {
  children: React.ReactNode;
  cookies: string;
}) {
  const [queryClient] = useState(() => new QueryClient());
  const [header, setHeader] = useState<string>("");
  console.log("trpc react => api key: ", apiKey);

  const [trpcClient] = useState(() =>
    api.createClient({
      transformer,
      links: [
        loggerLink({
          enabled: (op) =>
            process.env.NODE_ENV === "development" ||
            (op.direction === "down" && op.result instanceof Error),
        }),
        unstable_httpBatchStreamLink({
          url: getUrl(),
          headers() {
            return {
              cookie: props.cookies,
              "x-trpc-source": "react",
              "x-header-key": header,
            };
          },
        }),
      ],
    })
  );

  useEffect(() => {
    setHeader(localStorage.getItem("header-item"));

    const fetchHeaderItem = () => {
      setApiKey(localStorage.getItem("header-item"));
    }

    window.addEventListener("header-item-storage-event", fetchHeaderItem);

    return () => {
      window.removeEventListener("header-item-storage-event", fetchHeaderItem);
    }
  }, []);

This doesn't work since the trpcClient gets initialized before the header does in useEffect and there doesn't seem to be a way to update the headers via the trpcClient. Any advice would be apprecited!

4 replies

TTCTheo's Typesafe Cult

•Created by Sz on 12/4/2023 in #questions

key paths for recursive nested types

Hey all, I have the following type

type Schema = {
  name: string,
  description: string,
  type: "string" | "number" | "boolean" | "array" | "object",
  enum?: string[],
  properties?: Schema[],
  items?: Omit<Schema, "name" | "description">,
}

const schema: z.ZodType<Schema> = z.object({
  name: z.string(),
  description: z.string(),
  type: z.union([z.literal("string"), z.literal("number"), z.literal("boolean"), z.literal("array"), z.literal("object")]),
  enum: z.array(z.string()).optional(),
  properties: z.array(z.lazy(() => schema)).optional(),
  items: z.lazy(() => schema).optional(),
})

type Schema = {
  name: string,
  description: string,
  type: "string" | "number" | "boolean" | "array" | "object",
  enum?: string[],
  properties?: Schema[],
  items?: Omit<Schema, "name" | "description">,
}

const schema: z.ZodType<Schema> = z.object({
  name: z.string(),
  description: z.string(),
  type: z.union([z.literal("string"), z.literal("number"), z.literal("boolean"), z.literal("array"), z.literal("object")]),
  enum: z.array(z.string()).optional(),
  properties: z.array(z.lazy(() => schema)).optional(),
  items: z.lazy(() => schema).optional(),
})

and am trying to build out a type that represents all the possible key paths that could be created through the nesting of properties or items. I've tried a few patterns and have had chatGPT spit types out, but none of them seem to work. The closest thing I could get to was this

type Keypath<T> = T extends { properties: Schema[] }
  ? { [K in keyof T['properties']]: `properties.${K}` | Keypath<T['properties'][K]> }[keyof T['properties']]
  : T extends { items: Omit<Schema, "name" | "description"> }
  ? `items.${number}` | Keypath<T['items']>
  : never;

type Keypath<T> = T extends { properties: Schema[] }
  ? { [K in keyof T['properties']]: `properties.${K}` | Keypath<T['properties'][K]> }[keyof T['properties']]
  : T extends { items: Omit<Schema, "name" | "description"> }
  ? `items.${number}` | Keypath<T['items']>
  : never;

For now, I've settled to using regex through zod to represent the type

const formSchemaKeyPath = z.string().regex(/^(functions)((\.[0-9]+)(\.(properties|items)))*/)

const formSchemaKeyPath = z.string().regex(/^(functions)((\.[0-9]+)(\.(properties|items)))*/)

If anyone knows the solution to this, please do let me know

9 replies

TTCTheo's Typesafe Cult

•Created by Sz on 3/8/2023 in #questions

When developing locally, is there a purpose for having a Dev DB vs just having a local DB?

I'm reading through the planetscale documentation and they mention the differences between dev DB branches and production DB branches. It makes sense that to test the schema changes proposed in a staging/development branch before promoting to production, but would it ever make sense to connect to a dev DB when developing locally as opposed to just spinning up the db locally?

1 replies

TTCTheo's Typesafe Cult

•Created by Sz on 1/9/2023 in #questions

Recommended pattern for consolidating data in tRPC?

Hey all, is there a recommended pattern for consolidating data so that the format of the data in the output is consistent? Currently building a standard t3 app and am considering using either links or a context dedicated to formatting the output of the data

1 replies

TTCTheo's Typesafe Cult

•Created by Sz on 1/2/2023 in #questions

How to handle multiple react-query `Providers`?

Working on a codebase that uses TRPC and a library called WAGMI that uses react-query. Since both TRPC and WAGMI provide their own QueryClientProviders I'm trying to figure out what the right way is to go about managing both of them

7 replies

Gaming

Programming