Amplify Mock AWSAppSyncRealTimeProvider Connection error #2935
Description
Note: If your issue/bug is regarding the AWS Amplify Console service, please log it in the
Amplify Console GitHub Issue Tracker
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 below
import 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 Amplify
const 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 (
<div>
<div className="App">
<button onClick={createNewTodo}>Add Todo</button>
</div>
<div>
{state.todos.map((todo, i) => (
<p key={todo.id}>
{todo.name} : {todo.description}
</p>
))}
</div>
</div>
);
}
export default App;
amplify mock api
npm start
Expected 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.
Screenshots
Desktop (please complete the following information):
- OS: Mac OSX 10.13.6
- Node Version. 10.17.0
Additional context
The mutations are being persisted to the local database and the changes can be viewed by refreshing the page, however, the websocket is not updating in realtime.