Lien conditionnel

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

splitLink est un lien qui permet de bifurquer l'exécution de votre chaîne de liens selon une condition donnée. Les branches true et false sont toutes deux obligatoires. Vous pouvez fournir un seul lien, ou plusieurs liens par branche via un tableau.

Il est important de noter que lorsque vous fournissez des liens pour que splitLink les exécute, splitLink crée une toute nouvelle chaîne de liens basée sur les liens transmis. Par conséquent, vous devez utiliser un lien de terminaison si vous ne fournissez qu'un seul lien, ou ajouter le lien de terminaison à la fin du tableau si vous fournissez plusieurs liens à exécuter sur une branche. Voici une représentation visuelle du fonctionnement de splitLink :

Exemple d'utilisation

Désactiver le traitement par lots pour certaines requêtes

Imaginons que vous utilisiez httpBatchLink comme lien de terminaison dans votre configuration client tRPC. Cela signifie que le traitement par lots est activé pour chaque requête. Cependant, si vous devez désactiver le traitement par lots uniquement pour certaines requêtes, vous devrez modifier dynamiquement le lien de terminaison dans votre configuration client tRPC entre httpLink et httpBatchLink. C'est une occasion parfaite d'utiliser splitLink :

1. Configurer le client / utils/trpc.ts

client/index.ts
ts
import {
  createTRPCProxyClient,
  httpBatchLink,
  httpLink,
  splitLink,
} from '@trpc/client';
import type { AppRouter } from '../server';
const url = `http://localhost:3000`;
const client = createTRPCProxyClient<AppRouter>({
  links: [
    splitLink({
      condition(op) {
        // check for context property `skipBatch`
        return op.context.skipBatch === true;
      },
      // when condition is true, use normal request
      true: httpLink({
        url,
      }),
      // when condition is false, use batching
      false: httpBatchLink({
        url,
      }),
    }),
  ],
});

client/index.ts
ts
import {
  createTRPCProxyClient,
  httpBatchLink,
  httpLink,
  splitLink,
} from '@trpc/client';
import type { AppRouter } from '../server';
const url = `http://localhost:3000`;
const client = createTRPCProxyClient<AppRouter>({
  links: [
    splitLink({
      condition(op) {
        // check for context property `skipBatch`
        return op.context.skipBatch === true;
      },
      // when condition is true, use normal request
      true: httpLink({
        url,
      }),
      // when condition is false, use batching
      false: httpBatchLink({
        url,
      }),
    }),
  ],
});

2. Effectuer une requête sans traitement par lots

client.ts
ts
const postResult = proxy.posts.query(null, {
  context: {
    skipBatch: true,
  },
});

client.ts
ts
const postResult = proxy.posts.query(null, {
  context: {
    skipBatch: true,
  },
});

ou :

MyComponent.tsx
tsx
export function MyComponent() {
  const postsQuery = proxy.posts.useQuery(undefined, {
    trpc: {
      context: {
        skipBatch: true,
      },
    }
  });
  return (
    <pre>{JSON.stringify(postsQuery.data ?? null, null, 4)}</pre>
  )
})

MyComponent.tsx
tsx
export function MyComponent() {
  const postsQuery = proxy.posts.useQuery(undefined, {
    trpc: {
      context: {
        skipBatch: true,
      },
    }
  });
  return (
    <pre>{JSON.stringify(postsQuery.data ?? null, null, 4)}</pre>
  )
})

Options de splitLink

La fonction splitLink prend un objet d'options avec trois champs : condition, true et false.

ts
function splitLink<TRouter extends AnyRouter = AnyRouter>(opts: {
  condition: (op: Operation) => boolean;
  /**
   * The link to execute next if the test function returns `true`.
   */
  true: TRPCLink<TRouter> | TRPCLink<TRouter>[];
  /**
   * The link to execute next if the test function returns `false`.
   */
  false: TRPCLink<TRouter> | TRPCLink<TRouter>[];
}) => TRPCLink<TRouter>

ts
function splitLink<TRouter extends AnyRouter = AnyRouter>(opts: {
  condition: (op: Operation) => boolean;
  /**
   * The link to execute next if the test function returns `true`.
   */
  true: TRPCLink<TRouter> | TRPCLink<TRouter>[];
  /**
   * The link to execute next if the test function returns `false`.
   */
  false: TRPCLink<TRouter> | TRPCLink<TRouter>[];
}) => TRPCLink<TRouter>

Référence

Vous pouvez consulter le code source de ce lien sur GitHub.