hyhy Comments - Answer Overflow

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import { useState } from "react";

import { type AppRouter } from "~/server/api/root";
import { getUrl, transformer } from "./shared";

export const api = createTRPCReact<AppRouter>();

export function TRPCReactProvider(props: {
  children: React.ReactNode;
  cookies: string;
}) {
  const [queryClient] = useState(() => new QueryClient());

  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",
            };
          },
        }),
      ],
    })
  );

  return (
    <QueryClientProvider client={queryClient}>
      <api.Provider client={trpcClient} queryClient={queryClient}>
        {props.children}
      </api.Provider>
    </QueryClientProvider>
  );
}

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import { useState } from "react";

import { type AppRouter } from "~/server/api/root";
import { getUrl, transformer } from "./shared";

export const api = createTRPCReact<AppRouter>();

export function TRPCReactProvider(props: {
  children: React.ReactNode;
  cookies: string;
}) {
  const [queryClient] = useState(() => new QueryClient());

  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",
            };
          },
        }),
      ],
    })
  );

  return (
    <QueryClientProvider client={queryClient}>
      <api.Provider client={trpcClient} queryClient={queryClient}>
        {props.children}
      </api.Provider>
    </QueryClientProvider>
  );
}

as far as I can tell it's unmodified from the create-t3-app setup

21 replies

TTCTheo's Typesafe Cult

•Created by hyhy on 12/30/2023 in #questions

Calling trpc mutations on client components with app router

it does, yeah

21 replies

TTCTheo's Typesafe Cult

•Created by hyhy on 12/30/2023 in #questions

Calling trpc mutations on client components with app router

create: hyhyProtectedProcedure
  .input(
    z.object({
      name: z.string(),
    }),
  )
  .mutation(async ({ ctx, input }) => {
    await ctx.db.insert(episodes).values({
      name: input.name,
    });
  }),
update: hyhyProtectedProcedure
  .input(
    z.object({
      id: z.number(),
      name: z.string(),
    }),
  )
  .mutation(async ({ ctx, input }) => {
    await ctx.db
      .update(episodes)
      .set({
        name: input.name,
      })
      .where(eq(episodes.id, input.id));
  }),

create: hyhyProtectedProcedure
  .input(
    z.object({
      name: z.string(),
    }),
  )
  .mutation(async ({ ctx, input }) => {
    await ctx.db.insert(episodes).values({
      name: input.name,
    });
  }),
update: hyhyProtectedProcedure
  .input(
    z.object({
      id: z.number(),
      name: z.string(),
    }),
  )
  .mutation(async ({ ctx, input }) => {
    await ctx.db
      .update(episodes)
      .set({
        name: input.name,
      })
      .where(eq(episodes.id, input.id));
  }),

simple mutation in case it's helpful at all

21 replies

TTCTheo's Typesafe Cult

•Created by hyhy on 12/15/2023 in #questions

Drizzle Foreign Key Constraints are not allowed

export const relAlbumsEpisodes = mysqlTable("rel_albums_episodes", {
  id: serial("id").primaryKey(),
  albumId: int("album_id"),
  episodeId: int("episode_id"),
  createdAt: timestamp("created_at")
    .default(sql`CURRENT_TIMESTAMP`)
    .notNull(),
  updatedAt: timestamp("updatedAt").onUpdateNow(),
});

export const relAlbumsEpisodesRelations = relations(
  relAlbumsEpisodes,
  ({ one }) => ({
    artist: one(albums, {
      fields: [relAlbumsEpisodes.albumId],
      references: [albums.id],
    }),
    genre: one(episodes, {
      fields: [relAlbumsEpisodes.episodeId],
      references: [episodes.id],
    }),
  }),
);

export const relAlbumsEpisodes = mysqlTable("rel_albums_episodes", {
  id: serial("id").primaryKey(),
  albumId: int("album_id"),
  episodeId: int("episode_id"),
  createdAt: timestamp("created_at")
    .default(sql`CURRENT_TIMESTAMP`)
    .notNull(),
  updatedAt: timestamp("updatedAt").onUpdateNow(),
});

export const relAlbumsEpisodesRelations = relations(
  relAlbumsEpisodes,
  ({ one }) => ({
    artist: one(albums, {
      fields: [relAlbumsEpisodes.albumId],
      references: [albums.id],
    }),
    genre: one(episodes, {
      fields: [relAlbumsEpisodes.episodeId],
      references: [episodes.id],
    }),
  }),
);

9 replies

TTCTheo's Typesafe Cult

•Created by hyhy on 12/15/2023 in #questions

Drizzle Foreign Key Constraints are not allowed

i think this works correctly now but will have to see, it pushed up at least

9 replies

TTCTheo's Typesafe Cult

•Created by hyhy on 12/15/2023 in #questions

Drizzle Foreign Key Constraints are not allowed

https://planetscale.com/blog/working-with-related-data-using-drizzle-and-planetscale looks like the one, trying it now

9 replies

TTCTheo's Typesafe Cult

•Created by hyhy on 12/15/2023 in #questions

Drizzle Foreign Key Constraints are not allowed

Assuming I'm either missing something in my config, or defining the relations incorrectly

9 replies

TTCTheo's Typesafe Cult

•Created by hyhy on 12/15/2023 in #questions

Drizzle Foreign Key Constraints are not allowed

Relations in my schema in question, for example each episode has a mix:

export const episodes = mysqlTable(
  "episode",
  {
    id: bigint("id", { mode: "number" }).primaryKey().autoincrement(),
    name: varchar("name", { length: 256 }),
    mixId: bigint("mix_id", { mode: "number" }).references(() => mixes.id),
  },
  (episode) => ({
    nameIndex: index("name_idx").on(episode.name),
  }),
);

export const mixes = mysqlTable("mix", {
  id: bigint("id", { mode: "number" }).primaryKey().autoincrement(),
});

export const episodes = mysqlTable(
  "episode",
  {
    id: bigint("id", { mode: "number" }).primaryKey().autoincrement(),
    name: varchar("name", { length: 256 }),
    mixId: bigint("mix_id", { mode: "number" }).references(() => mixes.id),
  },
  (episode) => ({
    nameIndex: index("name_idx").on(episode.name),
  }),
);

export const mixes = mysqlTable("mix", {
  id: bigint("id", { mode: "number" }).primaryKey().autoincrement(),
});

or a many to many between albums and episodes

export const relAlbumsEpisodes = mysqlTable("rel_albums_episodes", {
  id: bigint("id", { mode: "number" }).primaryKey().autoincrement(),
  albumId: bigint("album_id", { mode: "number" }).references(() => albums.id),
  episodeId: bigint("episode_id", { mode: "number" }).references(() => episodes.id),
});

export const relAlbumsEpisodes = mysqlTable("rel_albums_episodes", {
  id: bigint("id", { mode: "number" }).primaryKey().autoincrement(),
  albumId: bigint("album_id", { mode: "number" }).references(() => albums.id),
  episodeId: bigint("episode_id", { mode: "number" }).references(() => episodes.id),
});