カスタムヘッダー

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

headersオプションは、httpBatchLinkまたはhttpLinkを使用する際に設定でカスタマイズできます。

headersはオブジェクトまたは関数のいずれかとして設定できます。関数の場合、各HTTPリクエストごとに動的に呼び出されます。

utils/trpc.ts
ts
// Import the router type from your server file
import type { AppRouter } from '@/server/routers/app';
import { httpBatchLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
let token: string;
export function setToken(newToken: string) {
  /**
   * You can also save the token to cookies, and initialize from
   * cookies above.
   */
  token = newToken;
}
export const trpc = createTRPCNext<AppRouter>({
  config(config) {
    return {
      links: [
        httpBatchLink({
          url: 'http://localhost:3000/api/trpc',
          /**
           * Headers will be called on each request.
           */
          headers() {
            return {
              Authorization: token,
            };
          },
        }),
      ],
    };
  },
});

utils/trpc.ts
ts
// Import the router type from your server file
import type { AppRouter } from '@/server/routers/app';
import { httpBatchLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
let token: string;
export function setToken(newToken: string) {
  /**
   * You can also save the token to cookies, and initialize from
   * cookies above.
   */
  token = newToken;
}
export const trpc = createTRPCNext<AppRouter>({
  config(config) {
    return {
      links: [
        httpBatchLink({
          url: 'http://localhost:3000/api/trpc',
          /**
           * Headers will be called on each request.
           */
          headers() {
            return {
              Authorization: token,
            };
          },
        }),
      ],
    };
  },
});

認証ログインの例

pages/auth.tsx
ts
const loginMut = trpc.auth.login.useMutation({
  onSuccess(opts) {
    token = opts.accessToken;
  },
});

pages/auth.tsx
ts
const loginMut = trpc.auth.login.useMutation({
  onSuccess(opts) {
    token = opts.accessToken;
  },
});

tokenは任意の形式で構いません。成功時に更新するクライアントサイドの変数にするか、トークンを保存してローカルストレージから取得するかは、完全にあなた次第です。