Amplify Mock AWSAppSyncRealTimeProvider Connection error

[riacoding]

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/Cli@4.5.0

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.

[attilah]

@riacoding Mock does not yet support the new WebSocket based subscriptions, only MQTT and the code you're trying to run using the new AmplifyJS library is leveraging the new WebSocket based subscriptions, hence creating this error for you.

[riacoding]

@attilah is there a roadmap to have this feature implemented? I understand the issue but it seems more of a regression as it was working in 1.2.4. I have been looking at the repo ,Am I right to assume that the mock would need to implement a pure WS server instead of MQTT to handle the new AWSAppSyncRealtimeProvider?

[narayanncube]

@riacoding - any success on this?

[riacoding]

They said it’s in the pipeline for getting fixed but there is no timeline as of yet

…

On Wed, Feb 19, 2020 at 10:53 AM narayanncube ***@***.***> wrote: @riacoding <https://github.com/riacoding> - any success on this? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2935?email_source=notifications&email_token=AACZHNSYFVXF7D4RHLINN53RDV537A5CNFSM4JWMMZF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEMJA5NQ#issuecomment-588385974>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACZHNX3W3ICTVLNMF7BOVDRDV537ANCNFSM4JWMMZFQ> .

[narayanncube]

Ok

Thanks for replying

They said it’s in the pipeline for getting fixed but there is no timeline as of yet
…
On Wed, Feb 19, 2020 at 10:53 AM narayanncube @.***> wrote: @riacoding https://github.com/riacoding - any success on this? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2935?email_source=notifications&email_token=AACZHNSYFVXF7D4RHLINN53RDV537A5CNFSM4JWMMZF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEMJA5NQ#issuecomment-588385974>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACZHNX3W3ICTVLNMF7BOVDRDV537ANCNFSM4JWMMZFQ .

[camin-mccluskey]

any update on this @riacoding

[riacoding]

Not at this time. Last I heard it was on the backlog but with no priority. Hopefully the more awareness the quicker the fix

…

On Sun, Mar 15, 2020 at 11:55 AM Camin McCluskey ***@***.***> wrote: any update on this @riacoding <https://github.com/riacoding> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2935 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACZHNX5RHDOC6QPNJFLJLLRHUQBFANCNFSM4JWMMZFQ> .

[dillonharless18]

Facing this issue as well still.

[passedByMe]

we are at the second wave of god damn covid!
this thing is still not working...

[PeterMitrano]

+1 for this fix

[mgarabedian]

Unsure if this is the same original issue above, but I filed this bug regarding Mock AppSync Subscriptions.
aws-amplify/amplify-category-api#122

[josefaidt]

Hey y'all as noted in @mgarabedian 's comment this item is currently being tracked on aws-amplify/amplify-category-api#122. Closing in favor of tracking 9621. As a workaround we can use a proxy or frontend app config to rewrite /graphql/realtime to /graphql during mock.