Description
Current Behavior
Im building a frontend with react and a backend with trpc.
Trpc lets you define strongly typed queries and mutations as well as a client that exposes those types to your front end. So my app has four parts, two apps and two libs:
Libs:
trpc-server <- core backend logic, defines the endpoints into the backend, their input and response types. Exports both a router that can be plugged into various server frameworks along with the type definition for the router (should be renamed to trpc-router the name is inaccurate)
trpc-client <- imports the type definitions and exports a client that can call the exposed endpoints to be used by the frontend
Apps:
web <- react web app that consumes the client lib to make queries to the backend
trpc-backend <-the backend server, consumes the trpc router exported by trpc-server , starts a server and exposes the router
A simple dependency graph that nx gets right when i do npx nx graph:
The issue im having is that when i run npx nx run web:serve and make changes in trpc-server the web app doesnt rebuild.
Actual:
Nothing happens. If you manually stop and re-run npx nx run web:serve then you see the ts error
Code is here: https://github.com/quirkles/nx-poc
Expected Behavior
Expected:
web app rebuilds and restarts, with a typescript error in packages/web/src/app/pages/Programs.tsx
GitHub Repo
https://github.com/quirkles/nx-poc
Steps to Reproduce
REPRO:
To repro there are two files that make it simple:
// packages/trpc-server/src/lib/entities/program/index.ts
import {z} from "zod";
import {getConnectionQueryParamsSchema} from "../shared";
export const programSchema = z.object({
id: z.string(),
programId: z.string(),
})
export type Program = z.infer
export const programConnectionQueryParamSchema = getConnectionQueryParamsSchema()
.optional() // <- comment out this line and the query parameters will be required
// packages/web/src/app/pages/Programs.tsx
import styled from "styled-components";
import {useEffect, useState} from "react";
import {trpcProxyClient} from "../services";
const ProgramsStyles = styled.div
export function Programs() {
const [flows, setFlows] = useState<Awaited<ReturnType>>()
useEffect(() => {
trpcProxyClient.programConnection.query().then(resp => { // <- after making the query parameters optional this will be invalid, and wont compile
console.log(resp)
setFlows(resp)
})
}, [])
return (
programs: {flows?.edges.length}.
);
}
Steps:
run npx nx run web:serve
make the query params required in packages/trpc-server/src/lib/entities/program/index.ts as described above
Nx Report
> NX Falling back to ts-node for local typescript execution. This may be a little slower.
- To fix this, ensure @swc-node/register and @swc/core have been installed
> NX Report complete - copy this into the issue template
Node : 16.14.0
OS : darwin-arm64
npm : 8.3.1
nx : 16.6.0
@nx/js : 16.6.0
@nx/jest : 16.6.0
@nx/linter : 16.6.0
@nx/workspace : 16.6.0
@nx/cypress : 16.6.0
@nx/devkit : 16.6.0
@nx/esbuild : 16.6.0
@nx/eslint-plugin : 16.6.0
@nx/node : 16.6.0
@nx/react : 16.6.0
@nrwl/tao : 16.6.0
@nx/web : 16.6.0
@nx/webpack : 16.6.0
nx-cloud : 16.2.0
typescript : 5.1.6
---------------------------------------
Local workspace plugins:
@copilot/trpc-server
@copilot/trpc-clientFailure Logs
No response
Operating System
- macOS
- Linux
- Windows
- Other (Please specify)
Additional Information
No response