Liltripple_reid Posts

Liltripple_reid

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

trpc optimistic updates causing data flicker

I'm trying to add optimistic updates to a calendar component but when the mutate function is called there's a flicker in the existing events

5 replies

TtRPC

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

persistedQueries & indexedDb

Would like to know if someone else has tried out the feature and/if got it work, I'm trying to recreate the Linear's approach to it's snappy feel and all-data-ready on initial page loads. This is the current implementation I have following the RTK docs

// IDB custom persister
import { type PersistedClient, type Persister } from "@tanstack/react-query-persist-client";
import { del, get, set } from "idb-keyval";

/**
 * Creates an Indexed DB persister
 * @see https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
 */
export function createIDBPersister(idbValidKey: IDBValidKey = "reactQuery") {
  return {
    persistClient: async (client: PersistedClient) => {
      await set(idbValidKey, client);
    },
    restoreClient: async () => {
      return await get<PersistedClient>(idbValidKey);
    },
    removeClient: async () => {
      await del(idbValidKey);
    },
  } as Persister;
}

// IDB custom persister
import { type PersistedClient, type Persister } from "@tanstack/react-query-persist-client";
import { del, get, set } from "idb-keyval";

/**
 * Creates an Indexed DB persister
 * @see https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
 */
export function createIDBPersister(idbValidKey: IDBValidKey = "reactQuery") {
  return {
    persistClient: async (client: PersistedClient) => {
      await set(idbValidKey, client);
    },
    restoreClient: async () => {
      return await get<PersistedClient>(idbValidKey);
    },
    removeClient: async () => {
      await del(idbValidKey);
    },
  } as Persister;
}

4 replies

TtRPC

•Created by Liltripple_reid on 10/23/2023 in #❓-help

force-cache planetscale error

trying to use the trpc API from RSCs fails and gives the following error

 result: {
    data: {
      secret: null,
      error: [Error: cache: 'force-cache' used on fetch for https://aws.connect.psdb.cloud/psdb.v1alpha1.Database/Execute with 'export const fetchCache = 'only-no-store']
    }
  },
  elapsedMs: 14

 result: {
    data: {
      secret: null,
      error: [Error: cache: 'force-cache' used on fetch for https://aws.connect.psdb.cloud/psdb.v1alpha1.Database/Execute with 'export const fetchCache = 'only-no-store']
    }
  },
  elapsedMs: 14

4 replies

TtRPC

•Created by Liltripple_reid on 10/5/2023 in #❓-help

anyone else getting a failed to fetch in latest next versions

not sure if this is happening to more people, I tried literally everything, changing to 127.0.01, updating next@canary, not sure if the error is on trpc side, no logs shown, but man I'm completely blocked by this.

✓ Compiled /secrets/page in 483ms (1262 modules)
 ⨯ Internal error: TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
 ⨯ Internal error: TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
digest: "956933652"

✓ Compiled /secrets/page in 483ms (1262 modules)
 ⨯ Internal error: TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
 ⨯ Internal error: TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
digest: "956933652"

PD: I'm using kirimase to generate the code, not sure if that could be an issue

2 replies

TtRPC

•Created by Liltripple_reid on 9/4/2023 in #❓-help

useMutation throwing 500 errors

12 replies

TtRPC

•Created by Liltripple_reid on 8/25/2023 in #❓-help

`createCaller` and RSC - with next-auth

I've been upgrading my trpc routers and handlers to support edge+app router with drizzle and next-auth; and something that has come up is the use of createCaller (with createTRPCNext instead of createTRPCReact - and without the TRPCProvider). So I wanted to ask if this is a correct way of using that function

// app/_trpc/server-client.tsx
import { type Session } from "next-auth";
import { appRouter } from "~/server/api/root";

export const serverClient = ({ session }: { session: Session | null }) => {
  return appRouter.createCaller({ session });
};

// app/_trpc/server-client.tsx
import { type Session } from "next-auth";
import { appRouter } from "~/server/api/root";

export const serverClient = ({ session }: { session: Session | null }) => {
  return appRouter.createCaller({ session });
};

6 replies