ItsWendell Posts

ItsWendell

•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