tRPC Client on NodeJS server keeps complaining that no fetcher has been configured

Hey, I want to create a tRPC setup where I have one server (works fine) and then a client which is created on another server.

I create the client like this:

import fetch from 'node-fetch';
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import superjson from 'superjson';
import type { AppRouter } from '@my-server';

const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3333/trpc',
      fetch: fetch as any,
    }),
  ],
  transformer: superjson,
    
});

export default trpc;

import fetch from 'node-fetch';
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import superjson from 'superjson';
import type { AppRouter } from '@my-server';

const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3333/trpc',
      fetch: fetch as any,
    }),
  ],
  transformer: superjson,
    
});

export default trpc;

It keeps complaining with this error:

TRPCClientError: 
"fetch" has not been found globally and no fetcher has been configured. To fix this, install a fetch package (like https://www.npmjs.com/package/cross-fetch), instantiate the fetcher, and pass it into your HttpLink constructor. For example:

import fetch from 'cross-fetch';
import { ApolloClient, HttpLink } from '@apollo/client'; 
const client = new ApolloClient({
  link: new HttpLink({ uri: '/graphql', fetch })
});

TRPCClientError: 
"fetch" has not been found globally and no fetcher has been configured. To fix this, install a fetch package (like https://www.npmjs.com/package/cross-fetch), instantiate the fetcher, and pass it into your HttpLink constructor. For example:

import fetch from 'cross-fetch';
import { ApolloClient, HttpLink } from '@apollo/client'; 
const client = new ApolloClient({
  link: new HttpLink({ uri: '/graphql', fetch })
});

I've tried using

cross-fetch

cross-fetch

as well with the same result.

Using version

10.27.3

10.27.3

.

Grateful for any hints

Solution

https://github.com/trpc/examples-minimal

GitHub

GitHub - trpc/examples-minimal

Contribute to trpc/examples-minimal development by creating an account on GitHub.

Jump to solution

tRPC Client on NodeJS server keeps complaining that no fetcher has been configured

Hey, I want to create a tRPC setup where I have one server (works fine) and then a client which is created on another server.

I create the client like this:

import fetch from 'node-fetch';
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import superjson from 'superjson';
import type { AppRouter } from '@my-server';

const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3333/trpc',
      fetch: fetch as any,
    }),
  ],
  transformer: superjson,
    
});

export default trpc;

import fetch from 'node-fetch';
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import superjson from 'superjson';
import type { AppRouter } from '@my-server';

const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3333/trpc',
      fetch: fetch as any,
    }),
  ],
  transformer: superjson,
    
});

export default trpc;

It keeps complaining with this error:

TRPCClientError: 
"fetch" has not been found globally and no fetcher has been configured. To fix this, install a fetch package (like https://www.npmjs.com/package/cross-fetch), instantiate the fetcher, and pass it into your HttpLink constructor. For example:

import fetch from 'cross-fetch';
import { ApolloClient, HttpLink } from '@apollo/client'; 
const client = new ApolloClient({
  link: new HttpLink({ uri: '/graphql', fetch })
});

TRPCClientError: 
"fetch" has not been found globally and no fetcher has been configured. To fix this, install a fetch package (like https://www.npmjs.com/package/cross-fetch), instantiate the fetcher, and pass it into your HttpLink constructor. For example:

import fetch from 'cross-fetch';
import { ApolloClient, HttpLink } from '@apollo/client'; 
const client = new ApolloClient({
  link: new HttpLink({ uri: '/graphql', fetch })
});