Setting up AWS Amplify for an AppSync subscription WebSocket endpoint: Step-by-step guide

Is there a way to specify a websocket endpoint with Amplify.configure(awsConfig)? The documentation only covers how to set up a singular http endpoint using the aws_appsync_graphqlEndpoint

For more information, you can refer to the AWS Amplify.configure documentation.

In my case, I have separate AppSync URLs, one for regular HTTP requests and one specifically for real-time WebSocket connections.

REACT_APP_GRAPHQL_ENDPOINT_HTTP
REACT_APP_GRAPHQL_ENDPOINT_WS

I am currently attempting to establish a connection to AppSync using the AWS Amplify SDK and leveraging the Amplify GraphQL subscriptions feature

typescriptaws-amplifyaws-appsync

Answer №1

During my exploration, I stumbled upon the fact that aws-amplify conveniently sets up the websocket endpoint by itself using the http endpoint when you call Amplify.configure(awsConfig). I found this to be quite intriguing as it was not explicitly documented anywhere.

Answer №2

If you want to automatically generate subscription, you can follow this method as well. When utilizing a GraphQl schema, use the following code snippet: 

@model(queries: { get: "getUser", list: "listUsers" }, subscriptions: null)

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

I'm having trouble grasping the issue: TypeError: Unable to access the 'subscribe' property of an undefined object

I've been working on a feature that involves fetching data from API calls. However, during testing, I encountered some errors even before setting up any actual test cases: TypeError: Cannot read property 'subscribe' of undefined at DataC ...

javascriptangulartypescriptrxjsintegration-testing

Amplify fails to detect existing Vue.js project when using Amplify

I have taken over a Vue.js app with AWS Amplify that was previously developed by another team. They utilized the Amplify Cli to integrate Auth into the application. After pulling down the project from GitHub, I noticed that the Auth service is functioning ...

amazon-web-servicesvue.jsaws-amplifyaws-amplify-cli

I am eager to perform DOM manipulation similar to jQuery but within the context of Angular 6

Is there a way to modify the background color of the main div when a button is clicked? <div> <p>I'd like to be able to change the background color of the parent div by clicking a certain button. </p> <button (click)=" ...

angulartypescriptangular6dom-manipulation

Transfer information between different classes and proceed to loop through the updated class directly from the html webpage

The Scenario In my angular 7 application, I am fetching data from a web API in JSON format. The app is functioning correctly, but I believe I am making excessive API calls and can optimize it to just one call. Custom Class: export class customClass ...

angulartypescript

Show dynamic JSON data in a nested format on the user interface with Aurelia's Treeview component

In the visual representation provided, there are currently three objects in the array. These objects, referred to as "parents", each have their own set of "children". The complexity lies in the fact that a parent element can also serve as a child element w ...

jsontypescriptnestedtreeviewaurelia

Discovering Typescript's property data type using reflection during program execution时间。

After transpiling TypeScript code to JavaScript, it is commonly understood that TypeScript type information gets lost and features such as reflection become very restricted. Since we rely on JavaScript reflection at runtime, the level of understanding rega ...

typescriptreflectiontypescript2.0

Tips for utilizing Optical Character Recognition in Node.js with a buffer image:

Are you facing difficulties in creating an API that extracts data from an image without saving it on the server? Look no further, as I have a solution for you. When testing with the URL '', everything works perfectly. However, using a buffer or l ...

node.jstypescriptocrtesseract

Bringing TypeScript modules from a local module into a React application

As I work on organizing my projects and keeping logic separate in components that will eventually be published, I have a specific structure set up for now: I have a library of Typescript scripts within a project named project-a A separate React app create ...

reactjstypescriptwebpack

Error encountered during the compilation of Angular2 Typescript due to difficulty in mapping a JSON response with underscores in the names

I recently started working with angular2 and I'm trying to map a JSON response to an array of custom objects. The issue I'm facing is that when I try to access a variable with an underscore in its name, I encounter a compile error. I followed the ...

jsonangulartypescriptangular2-services

Managing Geolocation in Ionic2 presenting challenges

Attempting to utilize Geolocation in ionic2 for device location access. Referred to the official documentation on https://ionicframework.com/docs/native/geolocation/. Successfully installed the necessary packages: $ ionic plugin add cordova-plugin-geoloca ...

angulartypescriptionic-frameworkionic2

Sacrificing type safety versus retaining type safety

I'm curious to know what sets apart these two approaches when declaring the status property. I understand that the second version maintains type safety, but how exactly does it achieve this? export type OwnProps = { id: number; name: string; sta ...

typescripttypes

What is the best way to transform this JSON data into an array of key-value pairs in JavaScript?

Dealing with nested JSON data can be challenging, especially when trying to extract key-value pairs efficiently. If anyone has suggestions on how to simplify this process and improve readability, please share your insights. The goal is to transform the ne ...

javascriptarraysjsontypescript

The Nestjs ClientMqtt now has the capability to publish both pattern and data to the broker, as opposed to just sending

I am currently utilizing Nestjs for sending data to a Mqtt Broker. However, I am facing an issue where it sends both the pattern and data instead of just the data in this format: { "pattern": "test/test", "data": " ...

typescriptmicroservicesmqttnestjsservice-broker

Step-by-step guide to creating a custom wrapper in React that modifies the props for a component

Exploring React components for the first time and seeking assistance. I am interested in dynamically wrapping one component inside another and modifying its props. For instance, considering the following component: If we want to pass the key3 from a wrapp ...

javascriptreactjstypescriptreact-native

The absence of a template or render function in a Vue.js 3 and Quasar 2 component has resulted in an

I am currently working on creating a dynamic component and passing a prop to it. However, I am encountering a warning message that says: Component is missing template or render function. Although the component is being rendered, I am still receiving the wa ...

typescriptvue.jsvue-componentvuejs3quasar

Angular getElementById is a useful method for accessing and manipulating elements

I am using asp.net and angular 7 to retrieve data saved by a form with a specific ID. The data is successfully stored in local storage but is not being displayed on the front-end for the user. No error messages are being shown. Can anyone assist me with th ...

htmlasp.netangulartypescriptangular7

Can you identify the type of component being passed in a Higher Order Component?

I am currently in the process of converting a protectedRoute HOC from Javascript to TypeScript while using AWS-Amplify. This higher-order component will serve as a way to secure routes that require authentication. If the user is not logged in, they will b ...

reactjstypescript

Excluding certain source files in Typescript's tsconfig is a common practice to

My attempt to configure Typescript to exclude specific files during compilation is not working as expected. Despite setting exclusions in my tsconfig.json file, the code from one of the excluded files (subClassA.ts) is still being included in the compiled ...

javascripttypescripttsconfigtranspiler

What steps should I follow to properly set up my tsconfig.json in order to ensure that only the essential files are included when executing npm run build

Introduction I am seeking guidance on how to correctly set up my tsconfig.json file to ensure only the necessary files are included when running npm run build for my projects. I want to avoid any unnecessary files being imported. Query What steps should ...

javascripttypescriptlibrarieshelpertsconfig

Encountering an issue while adding types to a custom component in a Formik form: Error message states that type 'T[keyof T]' cannot be assigned to type 'string'

I'm delving into TypeScript for the first time and attempting to incorporate it into a previous project as a learning exercise. I've hit a roadblock while trying to add types to a custom form field component in Formik, encountering an error mess ...

reactjstypescriptformik