[DevTools] Obscure error "contextMap[utilName] is not a function" when passing certain context to the router

[AkshayPathak]

Describe the bug

When passing a context to the Router with the trpc.useUtils() hook causes an obscure error.

function MyApp() {
  const utils = trpc.useUtils();
  return <RouterProvider router={router} context={{ trpcClient: utils }} />;
}

The error is Uncaught TypeError: contextMap[utilName] is not a function. It occurs in the <Explorer /> component in the DevTools.

I have found a temporary workaround by attempting to get the context panel to be in the collapsed state. As soon as I expand it, it throws this error.

In the stackblitz, I am unable to collapse the context section by default. However, it throws the error regardless.

From my testing, I am still unsure what types of items passed to the context field in the RouterProvider are causing the error. I have tried strings, numbers, variables from useState without it causing this error.

Your Example Website or App

https://stackblitz.com/edit/github-4ycrcx?file=client%2Fmain.tsx

Steps to Reproduce the Bug or Issue

1. Go to Stackblitz above
2. See an error concurring
3. Change the trpcClient on line 42 to a string or number or any other variable and notice that it works

Expected behavior

The DevTools should not throw an error when it sees the trpc utils.

Screenshots or Videos

No response

Platform

• OS: Linux
• Browser: Chrome
• Version: Latest

Additional context

No response

[SeanCassiere]

Playing around with your reproduction, I noticed that there were some missing steps in the setup procedure.

I also noticed that if you don't use the useUtils helper and pass the client directly into the context it seems to render fine.

https://stackblitz.com/edit/github-4ycrcx-j8sala?file=client%2Fmain.tsx

Edit: It's also quite possible, since the return of useUtils in meant to be used in a React component, and not outside of it it's throwing the error.

[SeanCassiere]

The above example has been refactored to allow, for invalidating queries in the QueryClient using the getQueryKey helper from the trpc docs.

You can fetch the data you need in the loader using the trpc helpers and set the data in the QueryClient cache using the getQueryKey.

[AkshayPathak]

It wouldn't be only to invalidate, but rather to populate the react query cache, like so:

loader: ({ context: { trpcClient, queryOptions } }) => {
  trpcClient?.document.getById.ensureData(queryOptions);
}

To be clear, the code above works just fine and I believe I got it from an old example from the Tanstack Router repo.
The issue occurs within the DevTools which triggers this error when rendering the object in the options area (see below)

[SeanCassiere]

Understood.

This still seems like something that should be possible with the getQueryKey helper and the trpc caller. I'll look into it further on my side.

[SeanCassiere]

@AkshayPathak
I cannot explain to you why this is... But if the QueryClient is injected into the context, then the trpc.useUtils work.

https://stackblitz.com/edit/github-4ycrcx-uctehc?file=client%2Fmain.tsx

Edit: I cannot explain why it works, because I myself have no idea why that fixes it.

[AkshayPathak]

@SeanCassiere It does indeed work! It's crazy that you found this. I don't understand why it works either!

[SeanCassiere]

@AkshayPathak 🤷🏽 probably because trpc relies on react-query's QueryClient and it being available via React context...

Close when you are sure everythings working fine.

[AkshayPathak]

Well, actually. I figured out why it works. If you provide more than 1 item to context, the DevTools only renders 1.

See this code below:

<RouterProvider
  router={router}
  context={{
    queryClient: queryClient,
    trpcClient: utils,
  }}
/>

The render of the DevTools is

[AkshayPathak]

@SeanCassiere I still think this is a problem with DevTools.

[SeanCassiere]

That's not an issue with devtools, rather that's how trpc uses Javascript Proxy Objects to get its functionality.
The proxy object determines its functionality at runtime while it is being called.

https://stackblitz.com/edit/github-4ycrcx-zfkftx?file=client%2Fmain.tsx

You see above, how the devtools renders more than one item. Its the proxy object that cannot be rendered since it doesn't really have anything in it till its actually called.

MDN docs for Javascript Proxy.

[AkshayPathak]

Gotcha. And to confirm, the error goes away with any other discrete item is passed to the context object, e.g.

<RouterProvider
  router={router}
  context={{
    discreteItem: "hello",
    trpcClient: utils,
  }}
/>

Would you, therefore, say that if the DevTools encounters a sole "proxy" object, that it does not attempt to render it and rather renders a null or blank.

I would think to add another check as part of this if statement to check if the object is a proxy and render blank or "ProxyObject" or something like that.

Update: Seems like there is no clean way to check if an object is a proxy. I am not sure what the best way would be to solve this.

[AkshayPathak]

Looking at the context object, from below:

const router = useRouter();
const routerState = useRouterState();

const explorerState = {
  ...router,
  state: router.state,
};

console.log("state: ", explorerState)

I see the following for the trpcClient

options: 
-> context:
    -> trpcClient: Proxy(Function) {length: 0, name: 'noop'}

@tannerlinsley / @SeanCassiere Do you see any ideas of a fix for this?

[SeanCassiere]

As far as I'm aware you aren't able to detect a Proxy, and as such you cannot determine its signature.

Maybe it makes sense to add an option for "unknown" in check conditions in the dev-tools panel?