From 9bb76164cf240c55c35d399257a39fcce9b2ef87 Mon Sep 17 00:00:00 2001 From: unnoq Date: Sun, 29 Dec 2024 19:18:31 +0700 Subject: [PATCH] docs --- .../content/docs/client/react-query.mdx | 33 ++++++++++++------- apps/content/content/docs/client/react.mdx | 17 +++++++--- apps/content/content/docs/client/vanilla.mdx | 9 +++-- .../content/content/docs/client/vue-query.mdx | 13 +++++--- apps/content/content/docs/contract-first.mdx | 9 +++-- apps/content/content/docs/index.mdx | 9 +++-- .../content/docs/server/file-upload.mdx | 11 +++++-- apps/content/content/home/client.mdx | 26 ++++++++++----- 8 files changed, 86 insertions(+), 41 deletions(-) diff --git a/apps/content/content/docs/client/react-query.mdx b/apps/content/content/docs/client/react-query.mdx index 354b4c48..38f29aba 100644 --- 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({ - 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(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> | undefined>(undefined); +const ORPCContext = React.createContext> | 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({ - 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(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 index ba0eea67..53e59439 100644 --- 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>() +export const { orpc, ORPCContext } = createORPCReact>() export function ORPCProvider({ children }: { children: React.ReactNode }) { - const [client] = useState(() => createORPCFetchClient({ - 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(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 index 68feac97..cf99c921 100644 --- 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({ - 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(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 index 88f55535..74de6326 100644 --- 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({ - 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(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 index adbd5b41..da1a670c 100644 --- 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({ - 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(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 index b72884f0..69985591 100644 --- 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({ - 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(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 index 31b62b6e..e5e63b9d 100644 --- 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({ - 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(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 index 46271470..d45b9653 100644 --- a/apps/content/content/home/client.mdx +++ b/apps/content/content/home/client.mdx @@ -1,14 +1,17 @@ ```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({ - 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(orpcLink) // File upload out of the box const output = await client.post.create({ @@ -44,14 +47,15 @@ try { ```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>() +export const { orpc, ORPCContext } = createORPCReact>() // ------------------ Example ------------------ @@ -118,9 +122,15 @@ const queries = orpc.useQueries(o => [ // ------------------ Provider ------------------ export function ORPCProvider({ children }: { children: React.ReactNode }) { - const [client] = useState(() => createORPCFetchClient({ - 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(orpcLink) + }) const [queryClient] = useState(() => new QueryClient()) return (