Failed to construct 'WebSocket' when using amplify mock over http #3008
Description
Copied from an upstream amplify-cli issue as reported by @riacoding:
Describe the bug
Create a fresh react project and add amplify to it with an API. On running amplify mock api the graphql subscriptions are not working as expected with the AWSAppSyncRealTimeProvider having a connection failed exception after timeout.Amplify CLI Version
Amplify/[email protected]To Reproduce
Following demo from aws blog post by Nikhil Dabhade
https://aws.amazon.com/blogs/mobile/amplify-framework-local-mocking/npx create-react-app myapp
amplify init
amplify add api
npm i aws-amplify
replace App.js with code belowimport React, { useEffect, useReducer } from "react";
import Amplify from "@aws-amplify/core";
import { API, graphqlOperation } from "aws-amplify";
import { createTodo } from "./graphql/mutations";
import { listTodos } from "./graphql/queries";
import { onCreateTodo, onUpdateTodo } from "./graphql/subscriptions";import config from "./aws-exports";
Amplify.configure(config); // Configure Amplifyconst initialState = { todos: [] };
const reducer = (state, action) => {
switch (action.type) {
case "QUERY":
return { ...state, todos: action.todos };
case "SUBSCRIPTION":
return { ...state, todos: [...state.todos, action.todo] };
default:
return state;
}
};async function createNewTodo() {
const todo = { name: "Use AppSync", description: "Realtime and Offline" };
await API.graphql(graphqlOperation(createTodo, { input: todo }));
}
function App() {
const [state, dispatch] = useReducer(reducer, initialState);useEffect(() => {
getData();
const subscription = API.graphql(graphqlOperation(onCreateTodo)).subscribe({
next: eventData => {
const todo = eventData.value.data.onCreateTodo;
dispatch({ type: "SUBSCRIPTION", todo });
}
});
return () => {
subscription.unsubscribe();
};
}, []);async function getData() {
const todoData = await API.graphql(graphqlOperation(listTodos));
dispatch({ type: "QUERY", todos: todoData.data.listTodos.items });
}return (
Add Todo
{state.todos.map((todo, i) => (
{todo.name} : {todo.description}
))}
);
}
export default App;
amplify mock api
npm startExpected behavior
From the http://localhost:20002/ local endpoint using graphiql to create a mutation create a todo item. This would then be automatically updated on the http://localhost:3000/ endpoint via the graphql subscription.
The error appears to happen because new Websocket is called with a string that starts with http:// instead of the required ws:// or wss://.
https:// is replaced with wss:// here.
Suggest adding a line that replaces http:// with ws:// to enable supporting subscriptions with amplify mock which runs locally on http:// by default.