Next.js - AppSync - Only absolute URLs are supported

[AlessandroVol23]

Do you want to request a feature or report a bug? Bug

What is the current behavior? I can't establish a connection to AppSync

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

1. Create AppSync endpoint with IAM authorization
2. Create apollo-client.js

import {
  ApolloClient,
  InMemoryCache,
  ApolloLink,
  createHttpLink,
} from "@apollo/client";
import { AUTH_TYPE, createAuthLink } from "aws-appsync-auth-link";
import { createSubscriptionHandshakeLink } from "aws-appsync-subscription-link";

import awsconfig from "./src/aws-exports";

const url = awsconfig.aws_appsync_graphqlEndpoint;
const region = awsconfig.aws_appsync_region;
const auth = {
  type: AUTH_TYPE.AWS_IAM,
};

const fullLink = createAuthLink({ url, region, auth });

const httpLink = createHttpLink({ uri: url });


const link = ApolloLink.from([
  // @ts-ignore
  fullLink,
  createSubscriptionHandshakeLink(url, httpLink),
]);

const client = new ApolloClient({
  uri: link,
  cache: new InMemoryCache(),
});

Error message: Error: Only absolute URLs are supported

What is the expected behavior? Connection to AppSync endpoint works

Which versions and which environment (browser, react-native, nodejs) / OS are affected by this issue? Did this work in previous versions? Node 16.10.0

[david-mcafee]

Hi @AlessandroVol23, I don't see where you are retrieving the credentials. There are a few other items that look a bit off (such as what you are doing with the subscription params). Here is a working sample that should help:

import { Auth } from 'aws-amplify';
import { createAuthLink } from 'aws-appsync-auth-link';
import { createSubscriptionHandshakeLink } from 'aws-appsync-subscription-link';
import { withAuthenticator } from "@aws-amplify/ui-react";
import {
	ApolloLink,
	ApolloClient,
	ApolloProvider,
	InMemoryCache,
} from '@apollo/client';

import AppSyncConfig from './aws-exports';

import App from './App';

const url = AppSyncConfig.aws_appsync_graphqlEndpoint;
const region = AppSyncConfig.aws_appsync_region;
const auth = {
	type: AppSyncConfig.aws_appsync_authenticationType,
	credentials: () => Auth.currentCredentials(),
};

const link = ApolloLink.from([
	createAuthLink({ url, region, auth }),
	createSubscriptionHandshakeLink({ url, region, auth }),
]);

const client = new ApolloClient({
	link,
	cache: new InMemoryCache(),
});

const WithProvider = () => (
	<ApolloProvider client={client}>
		<App />
	</ApolloProvider>
);

export default withAuthenticator(WithProvider);

[david-mcafee]

@AlessandroVol23 - closing this ticket, but please re-open if you are still experiencing issues after taking a look at my recommendations above. Thanks!