Encountering ERR_INVALID_HTTP_RESPONSE when trying to establish a connection with a Python gRPC server using @bufbuild/connect

Attempting to establish a connection to a python grpc server developed with grpcio through a web browser using connect-query. Encountering an issue where upon making a request, an ERR_INVALID_HTTP_RESPONSE error is displayed in the browser. Below is the React App component:

// [...]
import { TransportProvider } from '@bufbuild/connect-query';
import { createConnectTransport } from '@bufbuild/connect-web';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();
const transport = createConnectTransport({
    baseUrl: "http://localhost:50051",
    useBinaryFormat: true,
  });

class App extends React.Component {
    render() {
        return (
            <Suspense fallback='loading'>
                <Provider store={store}>
                    <TransportProvider transport={transport}>
                        <QueryClientProvider client={queryClient}>
                            <RouterProvider router={router} />
                        </QueryClientProvider>
                    </TransportProvider>
                </Provider>
            </Suspense>
        );
    }
}

Testing the following component:

export function MyController() {
    const { data } = useQuery(login.useQuery());
    console.log(data)

    return <MyView />;

}

The python server code:

import asyncio

import grpc
import uvloop
from grpc_reflection.v1alpha import reflection

from .status.servicer import StatusServicer, status_pb2, status_pb2_grpc


async def serve() -> None:
    server = grpc.aio.server()

    status_pb2_grpc.add_StatusServicer_to_server(StatusServicer(), server)
    
    service_names = (
        status_pb2.DESCRIPTOR.services_by_name["Status"].full_name,
        reflection.SERVICE_NAME,
    )
    reflection.enable_server_reflection(service_names, server)
    
    server.add_insecure_port('[::]:50051')
    
    await server.start()
    await server.wait_for_termination()


if __name__ == '__main__':
    with asyncio.Runner(loop_factory=uvloop.new_event_loop) as runner:
        runner.run(serve())

Is there something missing? It is my understanding that connect-query does not require a proxy and should connect automatically.

Answer â„–1

While it is correct that the connect protocol does not necessitate a proxy, the backend being utilized in this scenario is utilizing the grpc protocol, not connect. In contrast to connect, grpc actually requires a proxy in order to facilitate the translation to connect/grpc-web. grpc-web is a distinct protocol that aids proxies in translating standard HTTP requests into grpc requests.

You have a couple of options:

  • Employ a proxy to handle the translation. Envoy is commonly used for this purpose, as it can translate from connect/grpc-web to grpc. However, there are also other options available.
  • Alternatively, switch to a backend that supports grpc-web, such as: https://github.com/public/sonora (please note that this suggestion is based on a cursory Google search and may require further investigation).

Once you have implemented one of these solutions with grpc-web, the appropriate transport to utilize for grpc-web is to invoke createGrpcWebTransport instead of createConnectTransport.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discovering the type in Typescript without explicitly defining a type variable for the callback

I am looking for a solution to wrap rxjs subscribe's next callback with my own function: type Handler<T> = (value: T) => void; export function withTryCatch<T>(callback?: Handler<T>): Handler<T> { return (value: T) => ...

Is it advisable to utilize TypeScript interfaces for declaration files and React component prop definitions?

Whenever I create structures for object types, my go-to method is to define them in my declaration.d.ts file like this: type TagsObject = { _id: string; tag: string; } type ProjectData = { _createdAt: string; _id: string; _rev: string; _type: ...

What is the process for expanding types for a section element in Typescript?

When working with TypeScript, we define our component props types by extending a div like so: import { HTMLAttributes } from "react"; export interface IContainerProps extends HTMLAttributes<HTMLDivElement> { // Additional custom props for the c ...

Chakra UI - The "Open Modal" button is disabled from being clicked repeatedly

Encountering an issue with Chakra UI modal dialog in Next.js. Attempting to utilize the code below in pages/index.tsx for displaying a modal dialog. import type { NextPage } from "next"; import { Modal, ModalOverlay, ModalContent, Moda ...

Struggling to integrate Docker compatibility into an established NextJS project, encountering the frustrating "stat app/.next/standalone: file does not exist" message

I'm currently in the process of enhancing my existing NextJS + TypeScript project with Docker support and preparing to deploy it on Google Cloud Run. To achieve this, I've been referring to a helpful guide available at: https://github.com/vercel/ ...

Retrieve unique elements from an array obtained from a web API using angular brackets

I've developed a web application using .NET Core 3.1 that interacts with a JSON API, returning data in the format shown below: [ { "partner": "Santander", "tradeDate": "2020-05-23T10:03:12", "isin": "DOL110", "type ...

Guide to specifying a type as optional based on specific criteria

In coding, there exists a certain type that is defined as follows: type PropsType = { dellSelectedOption: (id: string, idOptions: string[]) => void; ownFilterData: Array<ActiveFilterAndPredFilterDataType>; watchOverflow: boolean; childre ...

What is the Reason for TypeScript's Inability to Verify the Type of Dynamic Key Object Fields?

How come TypeScript allows the declaration of seta even though it doesn't return objects of type A? type A = { a: '123', b: '456' } // Returns copy of obj with obj[k] = '933' function seta<K extends keyof A> ...

How to render a markdown file from a specified path using React and TypeScript

I am currently working on setting up routes to different .md files within my react/typescript application. Inside my App.tsx file, I have the following code: <Router> <main> <nav className="navbar navbar-expand-md navbar-light bg ...

The presence of React Router in Office JS Excel results in a blank screen

My current project involves developing add-ins for Excel using TypeScript and React. However, I have encountered numerous challenges along the way. Unlike a typical CRA React boilerplate web application, the Office add-in behaves differently. To illustrate ...

Create a d.ts file for Vue components that are written using Typescript

As a newcomer to Vue, I am eager to dive into creating components and publishing packages to NPM. My plan is to develop Vue (typescript) + Vuetify reusable components that can be easily installed from NPM into any of my projects. While I have successfully ...

Is it necessary for vertex labels to be distinct within a graph?

I am currently developing a browser-based application that allows users to create graphs, manipulate them, and run algorithms on them. At the moment, each vertex is represented by a unique positive integer. However, I am considering implementing labeled ve ...

Integrating Vimeo videos into Angular applications

I am attempting to stream videos using URLs in my Angular application. Every time I try, I encounter the following error: Access to XMLHttpRequest at 'https://player.vimeo.com/video/548582212?badge=0&amp;autopause=0&amp;player_id=0&amp;ap ...

Can the PrimeNG p-fileUpload component be configured to launch from a specific directory?

Utilizing the PrimeNG p-fileUpload component for file uploads. Looking to customize the default folder that opens when the select file button is clicked. Would like it to open in a specific location such as Desktop or Videos. Is there a method to achieve ...

Typescript error points out that the property is not present on the specified type

Note! The issue has been somewhat resolved by using "theme: any" in the code below, but I am seeking a more effective solution. My front-end setup consists of React (v17.0.2) with material-ui (v5.0.0), and I keep encountering this error: The 'palet ...

The Void Ionic type does not have the specified property available

Struggling to load markers when the button is clicked to find nearby gyms. Despite loading the map to my location upon click, no markers are displayed and an error indicating that then does not exist on type 'void' within IonViewDidLoad. gyms.ht ...

External node modules written in TypeScript can occasionally be transpiled into both `module.exports` and `

Currently, I am in the process of transforming my node application to utilize TypeScript external modules. While everything runs smoothly when executing the app, I encountered an issue with my mocha tests "exploding" after converting some of my .ts files d ...

Error encountered: The module '@mui/x-data-grid' does not export 'GridActionsCellItem'

I'm facing an issue while trying to import 'GridActionsCellItem' from '@mui/x-data-grid'. Here's the code: import { GridActionsCellItem } from '@mui/x-data-grid'; An error message pops up indicating: Attempted impor ...

Angular: How to Disable Checkbox

Within my table, there is a column that consists solely of checkboxes as values. Using a for loop, I have populated all values into the table. What I have accomplished so far is that when a checkbox is enabled, a message saying "hey" appears. However, if m ...

Creating a Versatile Data Retrieval Hook in TypeScript for APIs with Diverse Response Formats

Currently, I am undertaking a movie discovery project that involves fetching data from two APIs: Tmdb movie site. These APIs have different response structures—one for movies and one for genres. In order to streamline my code and avoid repeating the same ...