Async Link v10

A

Alex / KATT 🐱•12/2/22, 3:17 PM

Make a link before the ending link that tracks the state

A

Alex / KATT 🐱•12/2/22, 3:17 PM

Search our source code for dedupeLink for inspo

Mmauz @alex / KATT ok I guess its about using observables to trigger the pending reque...

M

mark salsbery•12/8/22, 5:01 PM

You probably have found a solution by now, but just in case...

Doing the refresh request on the same trpc client would hang for me (I assume because the link is awaiting on the refresh request so that request can't get through) so I believe that yes, you need to switch to fetch or axios to make the refresh request from the custom link.

Instead of using fetch/axios, I chose instead to use a separate, simple, proxy client for just auth requests, something like

// Only use this client for auth.login, auth.logout, and auth.tokenRefresh calls
export const trpcAuthProxyClient = createTRPCProxyClient<AppRouter>({
  links: [
    httpLink({
      url: apiUrl
    })
  ]
});

// Only use this client for auth.login, auth.logout, and auth.tokenRefresh calls
export const trpcAuthProxyClient = createTRPCProxyClient<AppRouter>({
  links: [
    httpLink({
      url: apiUrl
    })
  ]
});

// Only use this client for auth.login, auth.logout, and auth.tokenRefresh calls
export const trpcAuthProxyClient = createTRPCProxyClient<AppRouter>({
  links: [
    httpLink({
      url: apiUrl
    })
  ]
});

// Only use this client for auth.login, auth.logout, and auth.tokenRefresh calls
export const trpcAuthProxyClient = createTRPCProxyClient<AppRouter>({
  links: [
    httpLink({
      url: apiUrl
    })
  ]
});

Then, inspired by larskarbo/trpc-token-refresh-link and the trpc custom link docs I implement the custom refresh link something like this

import PQueue from 'p-queue';
import { TRPCLink } from '@trpc/client';
import { observable } from '@trpc/server/observable';
import type { AppRouter } from 'server/routers/_app';
import { trpcAuthProxyClient } from './trpc'

const queue = new PQueue({ concurrency: 1 });

const tokenRefreshLink: TRPCLink<AppRouter> = () => {
  return ({ next, op }) => {
    return observable((observer) => {
      void queue.add(async () => {
        //** Your custom refresh implementation here **
        if (tokenNeedsRefreshing()) {
          await trpcAuthProxyClient.auth.tokenRefresh.mutate();
        }
        //**

        next(op).subscribe({
          next(value) {
            observer.next(value);
          },
          error(error) {
            observer.error(error);
          },
          complete() {
            observer.complete();
          }
        });
      });
    });
  };
};

// create trpc client(s) ...

import PQueue from 'p-queue';
import { TRPCLink } from '@trpc/client';
import { observable } from '@trpc/server/observable';
import type { AppRouter } from 'server/routers/_app';
import { trpcAuthProxyClient } from './trpc'

const queue = new PQueue({ concurrency: 1 });

const tokenRefreshLink: TRPCLink<AppRouter> = () => {
  return ({ next, op }) => {
    return observable((observer) => {
      void queue.add(async () => {
        //** Your custom refresh implementation here **
        if (tokenNeedsRefreshing()) {
          await trpcAuthProxyClient.auth.tokenRefresh.mutate();
        }
        //**

        next(op).subscribe({
          next(value) {
            observer.next(value);
          },
          error(error) {
            observer.error(error);
          },
          complete() {
            observer.complete();
          }
        });
      });
    });
  };
};

// create trpc client(s) ...

import PQueue from 'p-queue';
import { TRPCLink } from '@trpc/client';
import { observable } from '@trpc/server/observable';
import type { AppRouter } from 'server/routers/_app';
import { trpcAuthProxyClient } from './trpc'

const queue = new PQueue({ concurrency: 1 });

const tokenRefreshLink: TRPCLink<AppRouter> = () => {
  return ({ next, op }) => {
    return observable((observer) => {
      void queue.add(async () => {
        //** Your custom refresh implementation here **
        if (tokenNeedsRefreshing()) {
          await trpcAuthProxyClient.auth.tokenRefresh.mutate();
        }
        //**

        next(op).subscribe({
          next(value) {
            observer.next(value);
          },
          error(error) {
            observer.error(error);
          },
          complete() {
            observer.complete();
          }
        });
      });
    });
  };
};

// create trpc client(s) ...

import PQueue from 'p-queue';
import { TRPCLink } from '@trpc/client';
import { observable } from '@trpc/server/observable';
import type { AppRouter } from 'server/routers/_app';
import { trpcAuthProxyClient } from './trpc'

const queue = new PQueue({ concurrency: 1 });

const tokenRefreshLink: TRPCLink<AppRouter> = () => {
  return ({ next, op }) => {
    return observable((observer) => {
      void queue.add(async () => {
        //** Your custom refresh implementation here **
        if (tokenNeedsRefreshing()) {
          await trpcAuthProxyClient.auth.tokenRefresh.mutate();
        }
        //**

        next(op).subscribe({
          next(value) {
            observer.next(value);
          },
          error(error) {
            observer.error(error);
          },
          complete() {
            observer.complete();
          }
        });
      });
    });
  };
};

// create trpc client(s) ...

Seems to work well, but I'm also kind of throwing this out here in case someone spots a major flaw

GitHub

GitHub - larskarbo/trpc-token-refresh-link: Token Refresh Link for ...

Token Refresh Link for tRPC. Contribute to larskarbo/trpc-token-refresh-link development by creating an account on GitHub.

Links Overview | tRPC

Links enable you to customize the flow of data between the tRPC Client and Server. A link should do only one thing, which can be either a self-contained modification to a tRPC operation (query, mutation, or subscription) or a side-effect based on the operation (such as logging).