From 7a138573a92e3234168fe311e205d18a553a37e4 Mon Sep 17 00:00:00 2001
From: Jack Williams <1736957+jpwilliams@users.noreply.github.com>
Date: Tue, 19 Dec 2023 15:22:13 +0000
Subject: [PATCH] Add docs for creating separate clients for multiple
 environments

---
 pages/docs/reference/client/create.mdx | 45 ++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/pages/docs/reference/client/create.mdx b/pages/docs/reference/client/create.mdx
index bae574d71..835cf3596 100644
--- a/pages/docs/reference/client/create.mdx
+++ b/pages/docs/reference/client/create.mdx
@@ -227,3 +227,48 @@ import { inngest } from "./client";
 
 export default inngest.createFunction(...);
 ```
+
+### Handling multiple environments with middleware
+
+If your client uses middleware, that middleware may import dependencies that are not supported across multiple environments such as "Edge" and "Serverless" (commonly with either access to WebAPIs or Node).
+
+In this case, we'd recommend creating a separate client for each environment, ensuring Node-compatible middleware is only used in Node-compatible environments and vice versa.
+
+This need is common in places where function execution should declare more involved middleware, while sending events from the edge often requires much less.
+
+<CodeGroup filename="./inngest/client.ts">
+```ts  {{ title: "v3" }}
+// inngest/client.ts
+import { Inngest } from "inngest";
+import { nodeMiddleware } from "some-node-middleware";
+
+export const inngest = new Inngest({
+  id: "my-app",
+  middleware: [nodeMiddleware],
+});
+
+// inngest/edgeClient.ts
+import { Inngest } from "inngest";
+
+export const inngest = new Inngest({
+  id: "my-app-edge",
+});
+```
+```ts  {{ title: "v2" }}
+// inngest/client.ts
+import { Inngest } from "inngest";
+import { nodeMiddleware } from "some-node-middleware";
+
+export const inngest = new Inngest({
+  name: "My App",
+  middleware: [nodeMiddleware],
+});
+
+// inngest/edgeClient.ts
+import { Inngest } from "inngest";
+
+export const inngest = new Inngest({
+  id: "My App (Edge)",
+});
+```
+</CodeGroup>