vildantursic•11mo ago

useQueries passing ctx data to splitLink not working

When tRPC is implemented with splitLink using useQueries does not pass cxt parameters to splitLink. Current implementation:

   const trpcClient = trpc.createClient({
        links: [
            splitLink({
                condition(opts: any) {
                    console.log("OPTS", opts.context.useOnline) // <= NO DATA IF useQueries used
                    return opts.context.useOnline
                },
                true: httpBatchLink({
                    url: "http://localhost:45835/api", // TODO: replace with online URL
                    headers: async () => {
                        const token = await getAccessTokenSilently()
                        return {
                            authorization: token,
                            user: JSON.stringify({
                                name: user?.name,
                                org: user?.org,
                            }),
                            application: activeApp,
                        }
                    },
                }),
                false: httpBatchLink({
                    url: "http://localhost:45835/api",
                    headers: async () => {
                        return {
                            authorization: "offline",
                            user: JSON.stringify({
                                name: "offline",
                                org: "OFFL",
                            }),
                            application: activeApp,
                        }
                    },
                }),
            }),
        ],
    })

   const trpcClient = trpc.createClient({
        links: [
            splitLink({
                condition(opts: any) {
                    console.log("OPTS", opts.context.useOnline) // <= NO DATA IF useQueries used
                    return opts.context.useOnline
                },
                true: httpBatchLink({
                    url: "http://localhost:45835/api", // TODO: replace with online URL
                    headers: async () => {
                        const token = await getAccessTokenSilently()
                        return {
                            authorization: token,
                            user: JSON.stringify({
                                name: user?.name,
                                org: user?.org,
                            }),
                            application: activeApp,
                        }
                    },
                }),
                false: httpBatchLink({
                    url: "http://localhost:45835/api",
                    headers: async () => {
                        return {
                            authorization: "offline",
                            user: JSON.stringify({
                                name: "offline",
                                org: "OFFL",
                            }),
                            application: activeApp,
                        }
                    },
                }),
            }),
        ],
    })

Implementation of useQueries usage

    const data = trpc.useQueries((t) =>
        machines.map((machine) =>
            t.heatmap(
                {
                    machine,
                    kpis: ["lossTime"],
                },
                { trpc: getMachineMode(machine) } // <= This function returns { ctx: { useOnline: true/false } }
            )
        )
    )

    const data = trpc.useQueries((t) =>
        machines.map((machine) =>
            t.heatmap(
                {
                    machine,
                    kpis: ["lossTime"],
                },
                { trpc: getMachineMode(machine) } // <= This function returns { ctx: { useOnline: true/false } }
            )
        )
    )

2 Replies

vildantursic•11mo ago

Note: This way of passing data to splitLink works on useQuery

Alex / KATT 🐱•11mo ago

If you think it's a bug, open an issue with a small reproduction 🙏