docs

unnoq · Dec 29, 2024 · 9bb7616 · 9bb7616
1 parent a49a3a8
commit 9bb7616
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 41 deletions.
diff --git a/apps/content/content/docs/client/react-query.mdx b/apps/content/content/docs/client/react-query.mdx
@@ -15,13 +15,17 @@ description: Simplify React Query usage with minimal integration using ORPC and
 
 ```ts twoslash
 import { createORPCReactQueryUtils } from '@orpc/react-query';
-import { createORPCFetchClient } from '@orpc/client';
+import { createORPCClient } from '@orpc/client';
+import { ORPCLink } from '@orpc/client/fetch';
 import type { router } from 'examples/server';
 
-// Create an ORPC client
-export const client = createORPCFetchClient<typeof router>({
-  baseURL: 'http://localhost:3000/api',
-});
+const orpcLink = new ORPCLink({
+  url: 'http://localhost:3000/api',
+  // fetch: optional override for the default fetch function
+  // headers: provide additional headers
+})
+
+const client = createORPCClient<typeof router /* or contract router */>(orpcLink)
 
 // Create React Query utilities for ORPC
 export const orpc = createORPCReactQueryUtils(client);
@@ -35,13 +39,14 @@ orpc.getting.
 
 ```tsx twoslash
 import { createORPCReactQueryUtils, RouterUtils } from '@orpc/react-query';
-import { createORPCFetchClient } from '@orpc/client';
+import { createORPCClient } from '@orpc/client';
+import { ORPCLink } from '@orpc/client/fetch';
 import { RouterClient } from '@orpc/server';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { router } from 'examples/server';
 import * as React from 'react';
 
-const ORPCContext = React.createContext<RouterUtils<RouterClient<typeof router>> | undefined>(undefined);
+const ORPCContext = React.createContext<RouterUtils<RouterClient<typeof router, unknown>> | undefined>(undefined);
 
 export function useORPC() {
   const orpc = React.useContext(ORPCContext);
@@ -54,11 +59,15 @@ export function useORPC() {
 }
 
 export function ORPCProvider({ children }: { children: React.ReactNode }) {
-  const [client] = React.useState(() =>
-    createORPCFetchClient<typeof router>({
-      baseURL: 'http://localhost:3000/api',
-    })
-  );
+  const [client] = React.useState(() => {
+    const orpcLink = new ORPCLink({
+      url: 'http://localhost:3000/api',
+      // fetch: optional override for the default fetch function
+      // headers: provide additional headers
+    });
+
+    return createORPCClient<typeof router>(orpcLink);
+  });
   const [queryClient] = React.useState(() => new QueryClient());
 
   const orpc = React.useMemo(() => createORPCReactQueryUtils(client), [client]);

diff --git a/apps/content/content/docs/client/react.mdx b/apps/content/content/docs/client/react.mdx
@@ -13,19 +13,26 @@ npm i @orpc/client @orpc/react @tanstack/react-query
 
 ```tsx twoslash
 import { createORPCReact } from '@orpc/react'
-import { createORPCFetchClient } from '@orpc/client'
+import { createORPCClient } from '@orpc/client'
+import { ORPCLink } from '@orpc/client/fetch'
 import { RouterClient } from '@orpc/server'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useState } from 'react'
 import type { router } from 'examples/server'
 import * as React from 'react'
 
-export const { orpc, ORPCContext } = createORPCReact<RouterClient<typeof router /** or contract router */>>()
+export const { orpc, ORPCContext } = createORPCReact<RouterClient<typeof router /** or contract router */, unknown>>()
 
 export function ORPCProvider({ children }: { children: React.ReactNode }) {
-    const [client] = useState(() => createORPCFetchClient<typeof router /** must match with createORPCReact*/>({
-        baseURL: 'http://localhost:3000/api',
-    }))
+    const [client] = useState(() => {
+        const orpcLink = new ORPCLink({
+            url: 'http://localhost:3000/api',
+            // fetch: optional override for the default fetch function
+            // headers: provide additional headers
+        })
+
+        return createORPCClient<typeof router>(orpcLink)
+    })
     const [queryClient] = useState(() => new QueryClient())
 
     return (

diff --git a/apps/content/content/docs/client/vanilla.mdx b/apps/content/content/docs/client/vanilla.mdx
@@ -14,14 +14,17 @@ npm i @orpc/client
 To create a fully typed client, you need either the type of the [router](/docs/server/router) you intend to use or the [contract](/docs/contract/builder).
 
 ```ts twoslash
-import { createORPCFetchClient, ORPCError } from '@orpc/client'
+import { createORPCClient, ORPCError } from '@orpc/client'
+import { ORPCLink } from '@orpc/client/fetch'
 import type { router } from 'examples/server'
 
-const client = createORPCFetchClient<typeof router /* or contract router */>({
-  baseURL: 'http://localhost:3000/api',
+const orpcLink = new ORPCLink({
+  url: 'http://localhost:3000/api',
   // fetch: optional override for the default fetch function
   // headers: provide additional headers
 })
+
+const client = createORPCClient<typeof router /* or contract router */>(orpcLink)
 
 //  File upload out of the box
 const output = await client.post.create({

diff --git a/apps/content/content/docs/client/vue-query.mdx b/apps/content/content/docs/client/vue-query.mdx
@@ -13,14 +13,19 @@ description: Simplify Vue Query usage with minimal integration using ORPC and Ta
 
 ```ts twoslash
 import { createORPCVueQueryUtils } from '@orpc/vue-query';
-import { createORPCFetchClient } from '@orpc/client';
+import { createORPCClient } from '@orpc/client';
+import { ORPCLink } from '@orpc/client/fetch';
 import type { router } from 'examples/server';
 
-// Create an ORPC client
-export const client = createORPCFetchClient<typeof router>({
-  baseURL: 'http://localhost:3000/api',
+const orpcLink = new ORPCLink({
+  url: 'http://localhost:3000/api',
+  // fetch: optional override for the default fetch function
+  // headers: provide additional headers
 });
 
+// Create an ORPC client
+export const client = createORPCClient<typeof router>(orpcLink);
+
 // Create Vue Query utilities for ORPC
 export const orpc = createORPCVueQueryUtils(client);
 

diff --git a/apps/content/content/docs/contract-first.mdx b/apps/content/content/docs/contract-first.mdx
@@ -129,14 +129,17 @@ That's it! The contract definition and implementation are now completely separat
 Create a fully typed client using just the contract definition:
 
 ```ts twoslash
-import { createORPCFetchClient, ORPCError } from '@orpc/client'
+import { createORPCClient, ORPCError } from '@orpc/client'
+import { ORPCLink } from '@orpc/client/fetch'
 import type { contract } from 'examples/contract'
 
-const client = createORPCFetchClient<typeof contract /* or server router */>({
-  baseURL: 'http://localhost:3000/prefix',
+const orpcLink = new ORPCLink({
+  url: 'http://localhost:3000/prefix',
   // fetch: optional override for the default fetch function
   // headers: provide additional headers
 })
+
+const client = createORPCClient<typeof contract /* or server router */>(orpcLink)
 
 //  File upload out of the box
 const output = await client.post.create({

diff --git a/apps/content/content/docs/index.mdx b/apps/content/content/docs/index.mdx
@@ -187,14 +187,17 @@ Start the server and visit http://localhost:3000/api/getting?name=yourname to se
 Use the fully typed client in any environment:
 
 ```ts twoslash
-import { createORPCFetchClient, ORPCError } from '@orpc/client'
+import { createORPCClient, ORPCError } from '@orpc/client'
+import { ORPCLink } from '@orpc/client/fetch'
 import type { router } from 'examples/server'
 
-const client = createORPCFetchClient<typeof router /* or contract router */>({
-  baseURL: 'http://localhost:3000/api',
+const orpcLink = new ORPCLink({
+  url: 'http://localhost:3000/api',
   // fetch: optional override for the default fetch function
   // headers: provide additional headers
 })
+
+const client = createORPCClient<typeof router /* or contract router */>(orpcLink)
 
 //  File upload out of the box
 const output = await client.post.create({

diff --git a/apps/content/content/docs/server/file-upload.mdx b/apps/content/content/docs/server/file-upload.mdx
@@ -63,12 +63,17 @@ To upload files with oRPC from the client, set up an oRPC client
 and pass a `File` object directly to the upload endpoint.
 
 ```typescript
-import { createORPCFetchClient } from '@orpc/client'
+import { createORPCClient } from '@orpc/client'
+import { ORPCLink } from '@orpc/client/fetch'
 
-const client = createORPCFetchClient<typeof appRouter>({
-  baseURL: 'http://localhost:3000',
+const orpcLink = new ORPCLink({
+  url: 'http://localhost:3000/api',
+  // fetch: optional override for the default fetch function
+  // headers: provide additional headers
 })
 
+const client = createORPCClient<typeof appRouter>(orpcLink)
+
 // Example: Upload a file from an HTML file input
 const fileInput = document.getElementById('file-input') as HTMLInputElement
 fileInput.onchange = async () => {

diff --git a/apps/content/content/home/client.mdx b/apps/content/content/home/client.mdx
@@ -1,14 +1,17 @@
 <Tabs items={['Client', 'React', 'React Query', 'Vue Query', 'CURL']}>
 <Tab value="Client">
 ```ts twoslash
-import { createORPCFetchClient, ORPCError } from '@orpc/client'
+import { createORPCClient, ORPCError } from '@orpc/client'
+import { ORPCLink } from '@orpc/client/fetch'
 import type { router } from 'examples/server'
 
-const client = createORPCFetchClient<typeof router /* or contract router */>({
-  baseURL: 'http://localhost:3000/api',
+const orpcLink = new ORPCLink({
+  url: 'http://localhost:3000/api',
   // fetch: optional override for the default fetch function
   // headers: provide additional headers
 })
+
+const client = createORPCClient<typeof router /* or contract router */>(orpcLink)
 
 //  File upload out of the box
 const output = await client.post.create({
@@ -44,14 +47,15 @@ try {
 <Tab value="React">
 ```tsx twoslash
 import { createORPCReact } from '@orpc/react'
-import { createORPCFetchClient } from '@orpc/client'
+import { createORPCClient } from '@orpc/client'
+import { ORPCLink } from '@orpc/client/fetch'
 import { RouterClient } from '@orpc/server'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useState } from 'react'
 import type { router } from 'examples/server'
 import * as React from 'react'
 
-export const { orpc, ORPCContext } = createORPCReact<RouterClient<typeof router /** or contract router */>>()
+export const { orpc, ORPCContext } = createORPCReact<RouterClient<typeof router /** or contract router */, unknown>>()
 
 // ------------------ Example ------------------
 
@@ -118,9 +122,15 @@ const queries = orpc.useQueries(o => [
 // ------------------ Provider ------------------
 
 export function ORPCProvider({ children }: { children: React.ReactNode }) {
-    const [client] = useState(() => createORPCFetchClient<typeof router /** must match with createORPCReact*/>({
-        baseURL: 'http://localhost:3000/api',
-    }))
+    const [client] = useState(() => {
+        const orpcLink = new ORPCLink({
+            url: 'http://localhost:3000/api',
+            // fetch: optional override for the default fetch function
+            // headers: provide additional headers
+        })
+
+        return createORPCClient<typeof router>(orpcLink)
+    })
     const [queryClient] = useState(() => new QueryClient())
 
     return (