bug: TRPCClientError: Invalid URL about msw-trpc

[michealroberts]

Hi @maloguertin ... could we brainstorm some solutions to this issue please 🙏

[alex-way]

That's done the trick. Will write up a helper function in the morning and provide the solution here

[michealroberts]

@alex-way Weirdly, today updating to al of the latest versions - the error has passed. So @trpc version 10.42.0 seems to be the version to aim for?

[alex-way]

@michealroberts Interesting, I can't see anything in the diff between 10.41.0 and 10.42.0 of trpc which would suggest this to be resolved. But I'll try updating later today and see if I get the same 😄

[AlexJWayne]

Upon upgrading from Node 16 to Node 18, i started to get a related error in my tests:

TRPCClientError: Failed to parse URL from /api/trpc/projectRoles.all

The fix was to change the tRPC endpoint in my tRPC client for my react web application from:

const url = '/api/trpc'

to

const url = `${window.location.protocol}//${window.location.host}/api/trpc`

Which should basically be the same thing anyway.

[flacial]

Hi @maloguertin ... could we brainstorm some solutions to this issue please 🙏

Hey there! You found any solution for this issue?

[alex-way]

I managed to resolve this issue, but ran into another. Effectively the workaround is to set the trpc base url to be an arbitrary value. e.g. http://testhost.local/api/trpc and then use the same value in your MSW mocks:

// utils/trpc.ts
import { httpBatchLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import type { AppRouter } from "@server/trpc/routers/_app";

function getBaseUrl() {
	if (process.env.NODE_ENV === "test") return "http://localhost:3000";
	if (typeof window !== "undefined") return "";

	if (process.env.NEXTAUTH_URL) return process.env.NEXTAUTH_URL;

	return `https://localhost:${process.env.PORT ?? 5001}`;
}

export const trpc = createTRPCNext<AppRouter>({
	config(opts) {
		return {
			links: [
				httpBatchLink({
					url: `${getBaseUrl()}/api/internal`,
				}),
			],
		};
	},
	ssr: false,
});

// test.ts
const server = setupServer(
	rest.get("http://localhost:3000/api/trpc/getData", (req, res, ctx) => {
		return res(ctx.json([]));
	}),
);

However, now I get another error:

RPCClientError: Missing result
    at Function.from (file:///C:/code/cloud-management-platform-2/src/cmp-web-ui/node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs:37:16)
    at file:///C:/code/cloud-management-platform-2/src/cmp-web-ui/node_modules/@trpc/client/dist/httpBatchLink-204206a5.mjs:200:56
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at processTimers (node:internal/timers:514:7) {
  meta: undefined,
  shape: undefined,
  data: undefined,
  [cause]: Error: Missing result
      at file:///C:/code/cloud-management-platform-2/src/cmp-web-ui/node_modules/@trpc/client/dist/httpBatchLink-204206a5.mjs:88:35
      at runNextTicks (node:internal/process/task_queues:60:5)
      at listOnTimeout (node:internal/timers:540:9)
      at processTimers (node:internal/timers:514:7)
}

Which I'm not sure what the issue is, but may be related to some kind've polyfilling, or requests firing before MSW can register. Not really sure though.

[alex-way]

Wait a second, I think the above error may be related to the response back from trpc being different than that of the call signature:

This is returned:

[
    {
        "result": {
            "data": [
                {
                    "accountId": "538704730908"
                }
            ]
        }
    }
]

Whereas I expected:

 [
      {
          "accountId": "12314"
      }
  ]

[maloguertin]

Is this resolved for you guys?

[michealroberts]

@maloguertin Yeh for me, this has been resolved, although ... looking at the API for msw version 2, we might need to expose some extras for forward and backward compatibility.