Is it possible use react-query with grpc-web?

[popuguytheparrot]

Is it possible use react-query with grpc-web?

Some examples, ideas?

[bluskript]

This is a very complicated example, BUT: https://github.com/harmony-development/staccato/tree/edaf378adea16bd97ffc207e23041e91b87239fa

(it was rewritten in vue later on, so that's why I linked that specific commit)

[bluskript]

here is a file containing all of the react queries

the grpc-web queries themselves are encapsulated in harmony-web-sdk

[remko]

This isn't exactly what you asked for, but although it is possible to use react-query with grpcweb, after having some problems with TypeScript support, the non-idiomaticness and verbosity of constructing queries in multiple statements, and the bundle overhead of including google-protobuf (230kb uncompressed), I chose to go down a different path.

I used grpc-gateway to expose the gRPC service as a REST API instead, which naturally works great with react-query. This automatically gives you all the query functions for your REST endpoints (simple functions calling the fetch API as expected), and paired with TypeScript type generation, you even get all the types for free for your queries. What's more, there is virtually no code overhead (there's no runtime dependency, and the only generated code is code you would have written for a normal REST API anyway).

The extra work this requires is that you annotate your proto with the (standard) gRPC Transcoding annotations, and your service needs to expose a gateway for this (but then again, it also needs to expose a gateway for grpcweb)

[dimitropoulos]

Hey everyone! it's possible! Check out Connect-Query which is fully compatible with the gRPC-web Protocol as well as the Connect Protocol (which, is a better gRPC-web).

[geekodour]

Is this react only for the moment?