Liltripple_reid Comments - Answer Overflow

Liltripple_reid

Explore posts from servers

TtRPC TTCTheo's Typesafe Cult DTDrizzle Team

•Created by Liltripple_reid on 10/13/2024 in #help

Unable to use `push` or `studio` anymore

after reviewing the error message I was using a .tsx extension in a file used by drizzle which somehow caused it to die

6 replies

DTDrizzle Team

•Created by Liltripple_reid on 10/13/2024 in #help

Unable to use `push` or `studio` anymore

update: it wasn't

6 replies

DTDrizzle Team

•Created by Liltripple_reid on 10/13/2024 in #help

Unable to use `push` or `studio` anymore

think so in that case

6 replies

DTDrizzle Team

•Created by Liltripple_reid on 10/13/2024 in #help

Unable to use `push` or `studio` anymore

this is the config I've been using since the start of my project

import { type Config } from "drizzle-kit";

import { env } from "~/env";

export default {
  schema: "./src/server/db/schema.ts",
  dialect: "sqlite",
  driver: "turso",
  verbose: true,
  dbCredentials: {
    url: env.DATABASE_URL,
    authToken: env.AUTH_TOKEN,
  },
} satisfies Config;

import { type Config } from "drizzle-kit";

import { env } from "~/env";

export default {
  schema: "./src/server/db/schema.ts",
  dialect: "sqlite",
  driver: "turso",
  verbose: true,
  dbCredentials: {
    url: env.DATABASE_URL,
    authToken: env.AUTH_TOKEN,
  },
} satisfies Config;

6 replies

TTCTheo's Typesafe Cult

•Created by om3r on 4/17/2024 in #questions

how to pass trpc typescript between parent and children ?

you can use the RouterOutputs of the path you're querying

7 replies

TtRPC

•Created by Liltripple_reid on 4/11/2024 in #❓-help

trpc optimistic updates causing data flicker

this is the flicker I'm referring to when updating an entry

5 replies

TtRPC

•Created by Liltripple_reid on 4/11/2024 in #❓-help

trpc optimistic updates causing data flicker

 const utils = api.useUtils();
  const { data: events } = api.entries.getByMonth.useQuery(
    { workspaceId, monthDate: format(month, "yyyy/MM") },
    {
      initialData,
      refetchOnWindowFocus: false,
      refetchOnReconnect: false,
    },
  );

  const { mutate } = api.entries.update.useMutation({
    onMutate: async (input) => {
      await utils.entries.getByMonth.cancel();
      const prev = utils.entries.getByMonth.getData({ workspaceId, monthDate });

      if (!prev || !auth) return;

      const updatedEvent = {
        ...prev.find((e) => e.id === input.id)!,
        ...input,
        temp: true,
      };

      utils.entries.getByMonth.setData({ workspaceId, monthDate }, (prevState) => {
        if (!prevState) return [];

        return [...prevState.filter((e) => e.id !== updatedEvent.id), updatedEvent];
      });

      return () => utils.entries.getByMonth.setData({ workspaceId, monthDate }, prev);
    },
    onSettled: () => {
      return utils.entries.getByMonth.invalidate({
        workspaceId,
        monthDate,
      });
    },
    onError: (error, _variables, rollback) => {
      toast.error("Something happened, please try again!", {
        description: error.message,
      });

      if (rollback) {
        rollback();
      }
    },
  });

 const utils = api.useUtils();
  const { data: events } = api.entries.getByMonth.useQuery(
    { workspaceId, monthDate: format(month, "yyyy/MM") },
    {
      initialData,
      refetchOnWindowFocus: false,
      refetchOnReconnect: false,
    },
  );

  const { mutate } = api.entries.update.useMutation({
    onMutate: async (input) => {
      await utils.entries.getByMonth.cancel();
      const prev = utils.entries.getByMonth.getData({ workspaceId, monthDate });

      if (!prev || !auth) return;

      const updatedEvent = {
        ...prev.find((e) => e.id === input.id)!,
        ...input,
        temp: true,
      };

      utils.entries.getByMonth.setData({ workspaceId, monthDate }, (prevState) => {
        if (!prevState) return [];

        return [...prevState.filter((e) => e.id !== updatedEvent.id), updatedEvent];
      });

      return () => utils.entries.getByMonth.setData({ workspaceId, monthDate }, prev);
    },
    onSettled: () => {
      return utils.entries.getByMonth.invalidate({
        workspaceId,
        monthDate,
      });
    },
    onError: (error, _variables, rollback) => {
      toast.error("Something happened, please try again!", {
        description: error.message,
      });

      if (rollback) {
        rollback();
      }
    },
  });

this is the part that's controlling the optimistic update

5 replies

TtRPC

•Created by Liltripple_reid on 4/11/2024 in #❓-help

trpc optimistic updates causing data flicker

5 replies

TtRPC

•Created by Sophia on 3/11/2024 in #❓-help

TRPC useQuery() in NextJS full stack with TypeScript

@Sophia the repo doesn't exist anymore it seems

3 replies

TTCTheo's Typesafe Cult

•Created by Liltripple_reid on 3/10/2024 in #questions

cookies are returned as `object Promise` from RSC

logging the cookie itself shows this

{
  workspace: Promise {
    'arq-studios',
    [Symbol(async_id_symbol)]: 147121,
    [Symbol(trigger_async_id_symbol)]: 137107,
    [Symbol(kResourceStore)]: undefined,
    [Symbol(kResourceStore)]: {
      headers: [Getter],
      cookies: [Getter],
      mutableCookies: [Getter],
      draftMode: [Getter]
    },
    [Symbol(kResourceStore)]: {
      isStaticGeneration: false,
      urlPathname: '/integrations/github?code=709726aa96755578ac0d',
      pagePath: '/(public)/integrations/github/page',
      incrementalCache: [IncrementalCache],
      isRevalidate: false,
      isPrerendering: undefined,
      fetchCache: undefined,
      isOnDemandRevalidate: false,
      isDraftMode: false,
      postpone: undefined,
      fetchMetrics: [Array],
      forceDynamic: true,
      revalidate: 0,
      tags: [Array],
      nextFetchId: 5
    },

{
  workspace: Promise {
    'arq-studios',
    [Symbol(async_id_symbol)]: 147121,
    [Symbol(trigger_async_id_symbol)]: 137107,
    [Symbol(kResourceStore)]: undefined,
    [Symbol(kResourceStore)]: {
      headers: [Getter],
      cookies: [Getter],
      mutableCookies: [Getter],
      draftMode: [Getter]
    },
    [Symbol(kResourceStore)]: {
      isStaticGeneration: false,
      urlPathname: '/integrations/github?code=709726aa96755578ac0d',
      pagePath: '/(public)/integrations/github/page',
      incrementalCache: [IncrementalCache],
      isRevalidate: false,
      isPrerendering: undefined,
      fetchCache: undefined,
      isOnDemandRevalidate: false,
      isDraftMode: false,
      postpone: undefined,
      fetchMetrics: [Array],
      forceDynamic: true,
      revalidate: 0,
      tags: [Array],
      nextFetchId: 5
    },

2 replies

TTCTheo's Typesafe Cult

•Created by chillihero on 3/8/2024 in #questions

Good (cheap) alternatives to Planescale

what about turso and it's edge databases coupled with the next middleware? (and lucia 3 or nextauth 5)

9 replies

TTCTheo's Typesafe Cult

•Created by Liltripple_reid on 3/9/2024 in #questions

June Analytics weird error when attempting to track

solved it, turns out the user_id was not a string LOL

3 replies

TtRPC

•Created by Liltripple_reid on 3/4/2024 in #❓-help

persistedQueries & indexedDb

any suggestions feedback or if anyone finds it useful is appreciated

4 replies

TtRPC

•Created by Liltripple_reid on 3/4/2024 in #❓-help

persistedQueries & indexedDb

// react.tsx file created by the t3-app scaffolder and modified to include the persister
"use client";

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

import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
import { type AppRouter } from "~/server/api/root";
import { createIDBPersister } from "./persister";
import { getUrl, transformer } from "./shared";

export const api = createTRPCReact<AppRouter>();
const persister = createIDBPersister();

export function TRPCReactProvider(props: { children: React.ReactNode }) {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            cacheTime: 1000 * 60 * 60 * 5,
          },
        },
      }),
  );

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

  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister, maxAge: 1000 * 60 * 60 * 4, buster: "persisted-indexed-db" }}
    >
      <api.Provider client={trpcClient} queryClient={queryClient}>
        {props.children}
      </api.Provider>
    </PersistQueryClientProvider>
  );
}

// react.tsx file created by the t3-app scaffolder and modified to include the persister
"use client";

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

import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
import { type AppRouter } from "~/server/api/root";
import { createIDBPersister } from "./persister";
import { getUrl, transformer } from "./shared";

export const api = createTRPCReact<AppRouter>();
const persister = createIDBPersister();

export function TRPCReactProvider(props: { children: React.ReactNode }) {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            cacheTime: 1000 * 60 * 60 * 5,
          },
        },
      }),
  );

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

  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister, maxAge: 1000 * 60 * 60 * 4, buster: "persisted-indexed-db" }}
    >
      <api.Provider client={trpcClient} queryClient={queryClient}>
        {props.children}
      </api.Provider>
    </PersistQueryClientProvider>
  );
}