Este es un tutorial sencillo de como empezar a usar tRPC en nuestras aplicaciones fullstack (backend y frontend) que usan Typescript como lenguaje principal
Configuracion del Proyecto
mkdir express-react-trpc
cd express-react-trpc
npm init -y
instalacion de las dependencias:
npm i express
instalacion de las dependencias de desarrollo:
npm i typescript ts-node-dev @types/express -D
configurando typescript:
npx tsc --init
tsconfig
package.json:
"scripts": {
"dev": "ts-node-dev --respawn --transpile-only server/index.ts"
},
servidor
npm install @trpc/server
npm i zod cors
server/index.ts
import express from "express";
import * as trpc from "@trpc/server";
import * as trpcExpress from "@trpc/server/adapters/express";
const app = express();
const port = 3000;
const appRouter = trpc.router().query("hello", {
resolve() {
return "Hello world";
},
});
app.use(
"/trpc",
trpcExpress.createExpressMiddleware({
router: appRouter,
createContext: () => null,
})
);
app.get("/", (req, res) => res.send("Hello World!"));
app.listen(port, () => console.log(`Example app listening on port ${port}!`));
Si ejecutas el proyecto con npm run dev y visitas http://localhost:3000/trpc/hello
podras ver tu hola mundo
cors
en el servidor
npm i cors
es necesario exponer los tipos de datos para que sean accesibles desde el frontend, asi que debajo de appRouter, coloca:
export type AppRouter = typeof appRouter;
Luego en package.json establece tu backend como una biblioteca añadiendo:
"main": "server/index.ts",
Nuestro servidor estaria quedando asi:
import express from "express";
import * as trpc from "@trpc/server";
import * as trpcExpress from "@trpc/server/adapters/express";
import cors from "cors";
const app = express();
const port = 3000;
const appRouter = trpc.router().query("hello", {
resolve() {
return "Hello world 2";
},
});
export type AppRouter = typeof appRouter;
app.use(cors());
app.use(
"/trpc",
trpcExpress.createExpressMiddleware({
router: appRouter,
createContext: () => null,
})
);
app.get("/", (req, res) => res.send("Hello World!"));
app.listen(port, () => console.log(`Example app listening on port ${port}!`));
Creacion de la aplicacion cliente
npm create vite
client react-ts
npm i @trpc/client @trpc/react react-query
import { useState } from "react";
import "./App.css";
import { QueryClient, QueryClientProvider } from "react-query";
import { trpc } from "./trpc";
const client = new QueryClient();
function AppContent() {
const hello = trpc.useQuery(["hello"]);
return <div>{JSON.stringify(hello.data)}</div>;
}
const App = () => {
const [trpcClient] = useState(() =>
trpc.createClient({
url: "http://localhost:3000/trpc",
})
);
return (
<trpc.Provider client={trpcClient} queryClient={client}>
<QueryClientProvider client={client}>
<AppContent />
</QueryClientProvider>
</trpc.Provider>
);
};
export default App;
input
.query("messages", {
input: z.number().default(10),
resolve({ input }) {
return messages.slice(-input);
},
});
const messages = trpc.useQuery(["messages", 1]);
mutations
const addMessage = trpc.useMutation("addMessage");
const onAdd = () => {
addMessage.mutate({
user: "user1",
message: "Hi!",
});
};
<button onClick={onAdd}>add Message</button>
Puedes refrescar y ya estaria.
ejecuaar consulta despues de mutation:
const onAdd = () => {
addMessage.mutate(
{
user: "user2",
message: "Hi!",
},
{
onSuccess: () => {
client.invalidateQueries(["messages"]);
},
}
);
};