From 94ee6e86abbb7fc497c88d5900de457cfc9eb688 Mon Sep 17 00:00:00 2001 From: Paul Sachs <11449728+paul-sachs@users.noreply.github.com> Date: Wed, 20 Dec 2023 12:28:21 -0500 Subject: [PATCH] Add interceptor example to readme (#313) Since we're getting a lot of questions about using interceptors in connect-query, putting a small example inside the readme itself. --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 7739a798..76c046a5 100644 --- a/README.md +++ b/README.md @@ -145,6 +145,8 @@ To learn more about the two modes of transport, take a look at the Connect-Web d To get started with Connect-Query, simply import a transport (either [`createConnectTransport`](https://github.com/connectrpc/connect-es/blob/main/packages/connect-web/src/connect-transport.ts) or [`createGrpcWebTransport`](https://github.com/connectrpc/connect-es/blob/main/packages/connect-web/src/grpc-web-transport.ts) from [`@connectrpc/connect-web`](https://www.npmjs.com/package/@connectrpc/connect-web)) and pass it to the provider. +A common use case for the transport is to add headers to requests (like auth tokens, etc). You can do this with a custom [interceptor](https://connectrpc.com/docs/web/interceptors). + ```tsx import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { TransportProvider } from "@connectrpc/connect-query"; @@ -154,6 +156,11 @@ const queryClient = new QueryClient(); export const App() { const transport = createConnectTransport({ baseUrl: "", + interceptors: [(next) => (request) => { + req.header.append("some-new-header", "some-value"); + // Add your headers here + return next(request); + }], }); return ( @@ -165,6 +172,8 @@ export const App() { } ``` +For more details about what you can do with the transport, see the [Connect-Web documentation](https://connectrpc.com/docs/web/). + ### `useTransport` ```ts