Mock Appsync Subscription Url "/graphql/realtime" doesn't work

[mgarabedian]

Before opening, please confirm:

• I have installed the latest version of the Amplify CLI (see above), and confirmed that the issue still persists.
• I have searched for duplicate or closed issues.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

How did you install the Amplify CLI?

No response

If applicable, what version of Node.js are you using?

No response

Amplify CLI Version

7.6.5

What operating system are you using?

Mac

Did you make any manual changes to the cloud resources managed by Amplify? Please describe the changes made.

no

Amplify Categories

api

Amplify Commands

Not applicable

Describe the bug

Appsync mock subscriptions have not been working for me for some time. I have been trying to understand why. Doing some debugging, it appears that amplify-js is calling the URL '/graphql/realtime' to initiate the websocket connection, but the mock server is not setup to handle that URL.

If I use a nginx proxy to rewrite that url from '/graphql/realtime' to '/graphql' , or manually alter the amplify-js code to call '/graphql', then everything is fine.

Have I missed something in the configuration, or is this a bug?

Expected behavior

the url that amplify js calls works with mock.

Reproduction steps

Run a subscription on mock.

GraphQL schema(s)

# Put schemas below this line

Log output

# Put your logs below this line

Additional information

No response

[josefaidt]

Hey @mgarabedian 👋 thanks for raising this! I was able to successfully reproduce this behavior, and was able to workaround it by proxying both paths to /graphql as you mentioned.

As an example, if we have a Next.js app we can rewrite the paths using the config

// next.config.cjs
import { aws_appsync_graphqlEndpoint } from './src/aws-exports'

export default {
  async rewrites() {
    return [
      {
        source: '/graphql',
        destination: aws_appsync_graphqlEndpoint,
      },
      {
        source: '/graphql/realtime',
        destination: aws_appsync_graphqlEndpoint,
      },
    ]
  },
}

Then using the sample Next.js homepage we can configure our client to route to point to our Next.js dev server URL

import { API, graphqlOperation } from 'aws-amplify'
import { useEffect } from 'react'
import * as subscriptions from '../graphql/subscriptions'

export default function HomePage(props) {
  // Subscribe to creation of Todo
  API.configure({
    aws_appsync_graphqlEndpoint: 'http://localhost:3000/graphql',
  })
  const subscription = API.graphql(
    graphqlOperation(subscriptions.onCreateTodo)
  ).subscribe({
    next: ({ provider, value }) => console.log({ provider, value }),
    error: (error) => console.warn(error),
  })

  useEffect(() => {
    return () => subscription.unsubscribe()
  }, [])

  return <h1>hello from the homepage</h1>
}

Marking as a bug 🙂

[alexNerazim]

Is this bug solved? Can't connect the websocket for subscribe events on graphQl...

[lysachok]

The proxying workaround doesn't work for me.

[LaurensBrinker]

For anyone else running into this issue with Create React App, I got it working with the help of @josefaidt 's proposed solution:

setupProxy.js file (create proxy in create-react-app):

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = (app) => {
  app.use(
    '/graphql',
    createProxyMiddleware({
      target: 'http://localhost:20002/graphql',
      changeOrigin: true,
    })
  );
  app.use(
    '/graphql/realtime',
    createProxyMiddleware({
      target: 'ws://localhost:20002/graphql',
      changeOrigin: true,
      ws: true
    })
  );
};

App.js file:

import React from 'react'

import './App.css';

import { Amplify } from 'aws-amplify';

import awsExports from "./aws-exports";

if (process.env.REACT_APP_LOCAL === 'true'){ // Can be better, but for testing this is how I switch for now.
  awsExports.aws_appsync_authenticationType = 'API_KEY'
  awsExports.aws_appsync_graphqlEndpoint = 'http://localhost:3000/graphql' // override to :3000
}

Amplify.configure(awsExports);

[phani-srikar]

Hi @mgarabedian @alexNerazim @LaurensBrinker @lysachok. Thanks for reporting this issue. We've recently released a fix for this one, can you please upgrade your Amplify CLI to version 10.3.0 and try it out? Please re-open if the issue persists.

[jansila]

Works for me now, thanks!

Hi @mgarabedian @alexNerazim @LaurensBrinker @lysachok. Thanks for reporting this issue. We've recently released a fix for this one, can you please upgrade your Amplify CLI to version 10.3.0 and try it out? Please re-open if the issue persists.

[lysachok]

Works for me as well. Thank you!