connectrpc / examples-es Goto Github PK
View Code? Open in Web Editor NEWExamples for using Connect with various TypeScript web frameworks and tooling.
Home Page: https://connectrpc.com/
License: Apache License 2.0
Examples for using Connect with various TypeScript web frameworks and tooling.
Home Page: https://connectrpc.com/
License: Apache License 2.0
The Next.js example currently only contains examples for the Pagers Router, and none for the newer App Router.
We should provide a basic example for using a client in a server-rendered page, and for crossing the serialization boundary between server and client components.
I am struggling to get a node client to work with external gRPC server (Salesforce Pub/Sub) for BiDiStreaming.
Unary requests are working fine.
I can create the initial stream but it is closed as soon as I attempt to read it.
My code is very similar to this example
https://www.supaglue.com/blog/how-to-build-a-real-time-cdc-event-integration-with-your-customers-salesforce.
I've gone through all the examples and have yet to find one where the client consumes BiDiStreaming.
I would appreciate it if the node client example could consume the stream.
The nextjs
example is currently using ^13.5.6
. We should update to v14.x and verify that it works correctly with @connectrpc/connect-next
. If so, we can relax the constraint for that package to include v14.
Is it possible to implement auto reconnect mechanism for connectrpc.com streams with connect-web? If yes, then how?
This repository hosts examples for many different frameworks. Currently, CI is running the following command for an example if any related file was changed:
examples-es/.github/workflows/ci.yaml
Line 60 in 5a9f041
Which runs the npm scripts buf:generate
, build
, and test
after installing dependencies:
Lines 65 to 68 in 5a9f041
This certainly gives us decent coverage, but looking at the example for Vue.js, we're missing some important scripts:
Lines 11 to 14 in 5a9f041
E2E tests and the linter never run in CI. Same with the Svelte example, where we also don't run the check
script, which is important in Svelte because the build
script does not type-check.
Since the examples do not follow a common pattern with their npm scripts (and they should not), I propose that we add a ci
script to every example, and run it after installing dependencies. For the Vue.js example, that would be:
"ci": "npm run buf:generate && npm run lint && npm run build && npm run test && npm run test:e2e:ci"
The lint
script for Vue.js runs eslint with --fix
. Other examples have a format
script. To make sure that all files are up to date, I suggest that we add a diff check via git after running the ci
script (reference).
If I add the following code to the index page in the Nextjs example:
const [sentHello, setSentHello] = useState<boolean>(false);
if (!sentHello) {
send("hello");
setSentHello(true);
}
I get the following error:
- error unhandledRejection: Error [ConnectError]: [unknown] Failed to parse URL from /api/buf.connect.demo.eliza.v1.ElizaService/Introduce
at Function.from (file:///C:/Users/x/Desktop/connect-es-integration/nextjs/node_modules/@bufbuild/connect/dist/esm/connect-error.js:70:20)
at abort (file:///C:/Users/x/Desktop/connect-es-integration/nextjs/node_modules/@bufbuild/connect/dist/esm/protocol/run-call.js:86:36)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Object.stream (file:///C:/Users/x/Desktop/connect-es-integration/nextjs/node_modules/@bufbuild/connect-web/dist/esm/connect-transport.js:129:20) {
digest: undefined
I get a similiar error on the actual project that I'm working on. It seems it might be related to the edge runtime of Nextjs:
- error unhandledRejection: Error [TypeError]: Cannot read properties of undefined (reading 'flags')
at setRemoved (C:\Users\x\node_modules\next\dist\compiled\@edge-runtime\primitives\events.js:488:3)
at removeListenerAt (C:\Users\x\node_modules\next\dist\compiled\@edge-runtime\primitives\events.js:554:3)
at EventTarget.dispatchEvent (C:\Users\x\node_modules\next\dist\compiled\@edge-runtime\primitives\events.js:627:33)
at abortSignalAbort (C:\Users\x\node_modules\next\dist\compiled\@edge-runtime\primitives\abort-controller.js:63:10)
at AbortController.abort (C:\Users\x\node_modules\next\dist\compiled\@edge-runtime\primitives\abort-controller.js:74:5)
at abort (file:///C:/Users/x/node_modules/@bufbuild/connect/dist/esm/protocol/run-call.js:87:24)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Object.unary (file:///C:/Users/x/node_modules/@bufbuild/connect-web/dist/esm/connect-transport.js:45:20)
at async Object.getProduct (file:///C:/Users/x/node_modules/@bufbuild/connect/dist/esm/promise-client.js:66:26) {
digest: undefined
Does this mean I cannot use Connect on the server side? Or is this an issue with either Connect or Nextjs?
EDIT: I think these are 2 separate issues that I'm seeing. In the actual project I'm not using @bufbuild/connect-next
but I'm using @bufbuild/connect
and @bufbuild/connect-web
. When I downgrade these to 0.8.6 the error goes away. I will try to reproduce it in a simpler version.
Is it possible to use connect-web
with just javascript without any framework? If yes, I would appreciate an example been added to this repo.
Thanks.
Hello, I would like to request an example with next.js framework.
I've installed and ran the example project and installed Expo-Go. The following is logged to the terminal in my code editor after entering text in the mobile UI: ConnectError: [internal] FileReader.readAsArrayBuffer is not implemented
I appear to have followed the README step by step, so I'm not too sure how to resolve this.
Hi there, I meet a interesting question. I usually work with browser and don't know much about RPC. So I come here for some help.
As the title says, I use connect-web in browser to replace axios simply. I used to use axios to send HTTP request to the server. The server support both simple HTTP request(for browser) and one kind of private protocol called xRPC(for other server) in same route. I want to figure out why the connect-web and the server can just works well. I guess there are two situation: the first is the connect protocol and xRPC protocol just happen to work well, and the second is they work by pure http, because the request header shows contentType: application/json.
Thank you for your time~
In some npm scripts, we use npx to execute npm package "binaries", for example:
"buf:generate": "npx buf generate buf.build/connectrpc/eliza",
The buf
binary is already on the $PATH when running npm scripts, so npx
just spawns an unnecessary process.
We should remove npx
from npm scripts to provide good examples.
Suggestion to using vite instead of svelte-kit. This will be deprecated in the future, and things work quite nicely with vite.
Otherwise folks running the example might run into:
svelte-kit dev is no longer available - use vite dev instead
1. Install vite as a devDependency with npm/pnpm/etc
2. Create a vite. config. js with the @sveltejs/kit/vite plugin (see below)
3. Update your package.json scripts to reference 'vite dev' instead of `svelte-kit dev'
// vite. config.js
import { sveltekit } from '@sveltejs/kit/vite';
/** @type fimport('vite').UserConfig} */
const config = {
plugins: [sveltekit()]
};
export default config;
I noticed the following warning in react/yarn-pnp:
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
This happens with yarn run build
.
Hello,
When trying to open the react native example in either web, android, or ios, I get hit with an error.
ERROR in ./node_modules/expo/build/launch/withDevTools.web.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/giovannicoakley/Documents/demo/connectrpc examples-es main react-native/node_modules/expo/build/launch/withDevTools.web.js: Duplicate __self prop found. You are most likely using the deprecated transform-react-jsx-self Babel plugin. Both __source and __self are automatically set when using the automatic runtime. Please remove transform-react-jsx-source and transform-react-jsx-self from your Babel config.
4 | function WithDevTools(props) {
5 | return (<>
->6 | <AppRootComponent {...props}/>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
7 |
8 | </>);
9 | }
at File.buildError [as buildCodeFrameError] (/Users/giovannicoakley/Documents/demo/connectrpc examples-es main react-native/node_modules/@babel/core/src/transformation/file/file.ts:249:12)
This is after downloading the repo, running npm install and then npm start.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.