ItsWendell
ItsWendell
TtRPC
Created by ItsWendell on 10/22/2023 in #❓-help
Global metadata / filters: Re-validate all queries
Hi all, Simple question, I'm looking for the most efficient way to add some global state to all queries, in this case it's a global filter, for this use-case, let's call it testModeFilter. In our dashboard this could be a Context / Provider that manages this state, ideally, when testModeFilter, we want to: 1. invalidate all queries / refetch mounted queries 2. Make sure this global filter / metadata is passed to the server 'somehow' What's the best approach for this? E.g. I was thinking possibly a cookie, or a header but was wondering if there's other ways to sent global metadata with every query / mutation.
4 replies
TtRPC
Created by ItsWendell on 8/10/2023 in #❓-help
Deduping is broken, but is being batched
Hi all, We're using TRPC for our React Native app, while doing some testing, I saw in my server logs that the requests don't seem to be deduplicated on the client side, but are batched to the server.
/trpc/drivers.getMapboxToken,drivers.getStatus,users.current,users.current,users.current,settings.get,drivers.getStatus,drivers.getMapboxToken,users.current
/trpc/drivers.getMapboxToken,drivers.getStatus,users.current,users.current,users.current,settings.get,drivers.getStatus,drivers.getMapboxToken,users.current
Here you can see that these requests are being made twice, this is for one active client, not sure why this is or if this is due potentially React Query. Versions being used: 10.37.1 for client / server React Query: ^4.32.6 What could this possibly be? Here's our TRPC Provider (combined some of the files):
export const trpc = createTRPCReact<AppRouter>();

export const createTrpcClient = () => {
return trpc.createClient({
transformer: superjson,
links: [
httpBatchLink({
url: `${apiUrl}/trpc`,
headers: getHeaders,
}),
],
});
};

export const TrpcProvider = ({ children }: { children: React.ReactNode }) => {
const [queryClient] = useState(
() =>
new QueryClient({
queryCache: trpcQueryCache,
}),
);
const [trpcClient] = useState(() => createTrpcClient());

useEffect(() => {
console.debug("[TrpcProvider] Listening for AppState changes", Platform.OS);
const subscription = AppState.addEventListener(
"change",
async (status: AppStateStatus) => {
console.info(
`[TrpcProvider] AppState changed to ${status}, setting onlineManager and focusManager`,
);
focusManager.setFocused(status === "active");
},
);

return () => {
console.debug("[TrpcProvider] Unsubscribing from AppState changes");
subscription.remove();
};
}, []);

return (
<trpc.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</trpc.Provider>
);
};
export const trpc = createTRPCReact<AppRouter>();

export const createTrpcClient = () => {
return trpc.createClient({
transformer: superjson,
links: [
httpBatchLink({
url: `${apiUrl}/trpc`,
headers: getHeaders,
}),
],
});
};

export const TrpcProvider = ({ children }: { children: React.ReactNode }) => {
const [queryClient] = useState(
() =>
new QueryClient({
queryCache: trpcQueryCache,
}),
);
const [trpcClient] = useState(() => createTrpcClient());

useEffect(() => {
console.debug("[TrpcProvider] Listening for AppState changes", Platform.OS);
const subscription = AppState.addEventListener(
"change",
async (status: AppStateStatus) => {
console.info(
`[TrpcProvider] AppState changed to ${status}, setting onlineManager and focusManager`,
);
focusManager.setFocused(status === "active");
},
);

return () => {
console.debug("[TrpcProvider] Unsubscribing from AppState changes");
subscription.remove();
};
}, []);

return (
<trpc.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</trpc.Provider>
);
};
4 replies
TtRPC
Created by ItsWendell on 4/30/2023 in #❓-help
TypeScript, Mono-Repositories and Internal Packages / Project References
I am getting quite frustrate with project references / internal projects and the resolving of types for TypeScript. To make it a bit smaller, let's say I have @acme/api-service which exports TRPC types and a Cloudflare Worker, I also have @acme/app which wants to consume this api service's TRPC types. In @acme/api-service I am exporting main / types fields in package.json, I am also using path aliases, and defining global types for it's environment in compilerOptions.types in tsconfig.json. When I don't use project references, and I run tsc --noEmit for type checking in the @acme/app folder I get errors about the missing global types, and the path aliases. When I use project references it seems like that kind of fixes it, but it looks like I need to continuously watch / build the declaration files of @acme/api-service while in development to not get these types out of sync. What is a good solution here, can I make sure that tsc reads the aliases / types from the tsconfig file from @acme/api-service? I am looking for a good setup for this scenario, where I can properly type check the whole mono repo during CI / CD, and making sure that the IDE stays fast since our repository is getting quite big.
4 replies
TtRPC
Created by ItsWendell on 11/27/2022 in #❓-help
Proxy TRPC server to another client
I've two TRPC servers, one essentially acts like a proxy, it validates auth and based on a specific property it forwards you to the destined server (with that one property removed). Now I have to write all those queries and mutation twice, is there a simpeler way to do this? Is there any way to bind a specific TRPC client to a server?
8 replies
TtRPC
Created by ItsWendell on 9/28/2022 in #❓-help
Sharing middleware between TRPC servers
We currently have microservices REST API's on Cloudflare Workers and I'm thinking about moving this to TRPC Microservices. We currently have a middleware in a shared package that we can reuse between microservices for authentication, how do I do this within TRPC? How do I define a MiddlewareFunction that can be reused between multiple TRPC instances?
2 replies