// one-computer.js
 
function welcome(name) {
  return `Hello, ${name}!`
}
 
const greeting = welcome("React Miami!")
//    ^ "Hello, React Miami!"

// server.js
 
function welcome(name) {
  return `Hello, ${name}!`
}
 
startImaginaryServer({ welcome })

module Finance {
  typedef sequence<string> StringSeq;
  struct AccountDetails {
    string     name;
    StringSeq  address;
    long       account_number;
    double     current_balance;
  };
  exception insufficientFunds { };
  interface Account {
    void deposit(in double amount);
    void withdraw(in double amount)
                        raises(insufficientFunds);
    readonly attribute AccountDetails details;
  };
};

<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="http://www.w3.org/2003/05/soap-envelope/"
soap:encodingStyle="http://www.w3.org/2003/05/soap-encoding">
  <soap:Body>
    <m:GetUserResponse>
      <m:Username>Tony Stark</m:Username>
    </m:GetUserResponse>
  </soap:Body>
</soap:Envelope>

<?xml version="1.0"?>
<soap:Envelope xmlns:soap="http://www.w3.org/2003/05/soap-envelope">
  <soap:Header>
  </soap:Header>
  <soap:Body>
    <m:GetUser>
      <m:UserId>123</m:UserId>
    </m:GetUser>
  </soap:Body>
</soap:Envelope>

query {
  user(id: 1) {
    name
    tasks {
      name
      status
      tags {
       id
      }
    }
  }
}

// src/queries/getProject.ts (runs on the server)
import db from "db"
import * as z from "zod"
 
const GetProject = z.object({
  id: z.number(),
})
 
export default async function getProject(
  input: z.infer<typeof GetProject>
) {
  // Validate the input
  const data = GetProject.parse(input)
 
  const project = await db.project.findOne({ where: { id: data.id } })
 
  // Can do any processing, fetching from other APIs, etc
 
  return project
}

// src/pages/index.tsx (runs on the client & server)
import { useQuery } from "@blitzjs/rpc"
import getProject from "src/projects/queries/getProject"
 
function Index() {
  const [project] = useQuery(getProject, { where: { id: 1 } })
  
  return <span>{project.id}</span>
}

// src/pages/index.tsx (runs on the client & server)
import { useQuery } from "@blitzjs/rpc"
import getProject from "src/projects/queries/getProject"
 
function App() {
  const [project] = useQuery(getProject, { where: { id: 1 } })
  
  return <span>{project.id}</span>
}

// src/server/appRouter.ts
import { z } from 'zod';
import { initTRPC } from '@trpc/server';
 
import db from './db'
 
const t = initTRPC.create();
 
export const appRouter = t.router({
  getProject: t.procedure
    .input(
      z.object({ id: z.number() }),
    )
    .query(({ input }) => {
      const project = await db.project.findOne({ where: { id: input.id } })
      
      return project
    }),
});
 
export type AppRouter = typeof appRouter
 

// src/trpc-client.ts
import type { AppRouter } from '../server/appRouter'; // Magic happens here
 
export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      links: [
        httpBatchLink({
          url: 'http://localhost:3000/api/trpc',
        }),
      ],
    };
  },
  ssr: true,
});
 
// src/pages/index.tsx
import { trpc } from '../trpc-client'
 
function Index() {
  const { data } = trpc.getProject.useQuery({ id: 1 })
  
  return <span>{data.id}</span>;
}

import { useQuery } from '@tanstack/react-query';
import { server$ } from '@tanstack/bling';
  
 
export default function Index() {
  const { isLoading, error, data } = useQuery({
    queryKey: ['project'],
    queryFn: server$(async () => { // 🤯
      return await db.project.findOne({ where: { id: input.id } });
    })
  })
    
  if (isLoading) return <span>Loading...</span>;
  if (error) throw error;
    
  return <span>{data.id}</span>;
}

// app/page.tsx
import { db } from '../db';
import { Counter } from '../components/Counter.tsx';
 
export default function Page() {
  const posts = await db.posts.select('name', 'slug');
 
  return (
    <div>
      <Counter />
      <ul>
        {posts.map(post => (
          <li key={post.slug}>
            <a href={`/blog/${post.slug}`}>{post.name}</a>
          </li>
        ))}
      </ul>
    </div>
  )
}

import { createClient, Mutable, OASOutput } from 'fets';
import type oas from './openapi';
 
const client = createClient<typeof oas>({
  endpoint: 'http://localhost:3000',
});
 
type Project = OASOutput<typeof oas, '/project/{id}', 'get'>;

// openapi.ts
export default { openapi: '3.0.0' /* ... */ } as const

import { createClient, Mutable, OASOutput } from 'fets';
import type oas from './openapi';
 
const client = createClient<typeof oas>({
  endpoint: 'http://localhost:3000',
});
 
type Project = OASOutput<typeof oas, '/project/{id}', 'get'>;

const newProjectRes = await client['/todo'].put({
  json: {
    content: { name: "New Project" }
  },
});
const newProjectJson = await newProjectRes.json();
 
const getTodosRes = await client['/projects'].get();
 
// Deleting the project
const deleteProjectRes = await client['/project/{id}'].delete({
  params: {
    id: newProjectJson.id,
  },
});
 
if (!deleteProjectRes.ok) {
  console.error('Failed to delete project');
}
const newProjectRes = await client['/todo'].put({
  json: {
    content: { name: "New Project" }
  },
});
const newProjectJson = await newProjectRes.json();
 
const getTodosRes = await client['/projects'].get();
 
// Deleting the project
const deleteProjectRes = await client['/project/{id}'].delete({
  params: {
    id: newProjectJson.id,
  },
});
 
if (!deleteProjectRes.ok) {
  console.error('Failed to delete project');
}
const newProjectRes = await client['/todo'].put({
  json: {
    content: { name: "New Project" }
  },
});
const newProjectJson = await newProjectRes.json();
 
const getTodosRes = await client['/projects'].get();
 
// Deleting the project
const deleteProjectRes = await client['/project/{id}'].delete({
  params: {
    id: newProjectJson.id,
  },
});
 
if (!deleteProjectRes.ok) {
  console.error('Failed to delete project');
}