Madyan Posts - Answer Overflow

Madyan

Explore posts from servers

•Created by Madyan on 12/12/2024 in #❓-help

Type mismatch with queryClient prop of @trpc/react-query

Getting the following type-check error:

      src/providers/query-client.tsx:49:42 - error TS2322: Type 'import("/<...>/node_modules/@tanstack/query-core/build/modern/hydration-CLZ8NKV0", { with: { "resolution-mode": "import" } }).b' is not assignable to type 'import("/<...>/node_modules/@tanstack/query-core/build/modern/hydration-C0fOPJLA").b'.
        Property '#private' in type 'QueryClient' refers to a different member that cannot be accessed from within type 'QueryClient'.
      
      49     <trpc.Provider client={clients.trpc} queryClient={clients.query}>
                                                  ~~~~~~~~~~~
      
        ../../node_modules/@trpc/react-query/dist/internals/context.d.ts:56:5
          56     queryClient: QueryClient;
                 ~~~~~~~~~~~
          The expected type comes from property 'queryClient' which is declared here on type 'IntrinsicAttributes & TRPCProviderProps<BuiltRouter<{ ctx: { signal: AbortSignal; user: User | null; }; meta: object; errorShape: DefaultErrorShape; transformer: true; }, DecorateCreateRouterOptions<...>>, unknown>'
      
      
      Found 1 error in src/providers/query-client.tsx:49

      src/providers/query-client.tsx:49:42 - error TS2322: Type 'import("/<...>/node_modules/@tanstack/query-core/build/modern/hydration-CLZ8NKV0", { with: { "resolution-mode": "import" } }).b' is not assignable to type 'import("/<...>/node_modules/@tanstack/query-core/build/modern/hydration-C0fOPJLA").b'.
        Property '#private' in type 'QueryClient' refers to a different member that cannot be accessed from within type 'QueryClient'.
      
      49     <trpc.Provider client={clients.trpc} queryClient={clients.query}>
                                                  ~~~~~~~~~~~
      
        ../../node_modules/@trpc/react-query/dist/internals/context.d.ts:56:5
          56     queryClient: QueryClient;
                 ~~~~~~~~~~~
          The expected type comes from property 'queryClient' which is declared here on type 'IntrinsicAttributes & TRPCProviderProps<BuiltRouter<{ ctx: { signal: AbortSignal; user: User | null; }; meta: object; errorShape: DefaultErrorShape; transformer: true; }, DecorateCreateRouterOptions<...>>, unknown>'
      
      
      Found 1 error in src/providers/query-client.tsx:49

I deleted all trpc/tanstack dependencies, and reinstalled them using the command below, but still the same issue:

pnpm add @trpc/server@next @trpc/client@next @trpc/react-query@next @tanstack/react-query@latest

pnpm add @trpc/server@next @trpc/client@next @trpc/react-query@next @tanstack/react-query@latest

Any idea what's wrong?

2 replies

CDCloudflare Developers

•Created by Madyan on 7/8/2024 in #workers-help

How to abort realtime connection when request ends?

I'm building a realtime chat app, and evaluating Ably to use as a Pub/Sub solution in my worker (I have a GraphQL subscription that subscribes to incoming pubsub messages from Ably, does some processing to the payload, then passes it to my React frontend). I noticed that (at least when testing locally) every request would start a new Ably connection, and it wouldn't disconnect. Hence I hit my peak Ably connection limit whilst I was developing. Can you help me resolve this please? I'm using GraphQL Yoga server, but here is a simpler example to reproduce the issue. Note I attempted to add code to detect the "abort" signal, but it's never getting triggered.

import * as Ably from "ably"

const worker: ExportedHandler<Record<string, unknown>> = {
  fetch: async (request, env) => {
    const signal = request.signal as AbortSignal
    signal.addEventListener("abort", () => {
      console.log("Request aborted via event listener")
    })
    signal.onabort = () => {
      console.log("Request aborted")
    }

    const ably = new Ably.Realtime({
      key: env.ABLY_API_KEY as string,
    })

    await ably.connection.once("connected")

    return Response.json({ message: "Hello, world!" })
  },
}

export default worker

import * as Ably from "ably"

const worker: ExportedHandler<Record<string, unknown>> = {
  fetch: async (request, env) => {
    const signal = request.signal as AbortSignal
    signal.addEventListener("abort", () => {
      console.log("Request aborted via event listener")
    })
    signal.onabort = () => {
      console.log("Request aborted")
    }

    const ably = new Ably.Realtime({
      key: env.ABLY_API_KEY as string,
    })

    await ably.connection.once("connected")

    return Response.json({ message: "Hello, world!" })
  },
}

export default worker

Thanks! 🙂

1 replies

CDCloudflare Developers

•Created by Madyan on 3/11/2024 in #workers-help

Can you invoke a worker by cli?

I want to create a script to seed my DB (it's D1, hence I can't use a Node.js script). Is there an easy way to invoke a worker (both locally / remote environments)? Or do I need to run the server, await for it to load, and then curl it? More context: https://discord.com/channels/595317990191398933/992060581832032316/1216702702856179752

1 replies

CDCloudflare Developers

•Created by Madyan on 8/3/2023 in #general-help

522 error when trying to redirect Apex to www domain

9 replies

Gaming

Programming