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

![image](https://user-images.githubusercontent.com/19362086/138657474-626cfe00-d6ef-478a-9b82-09b8de90cbe2.png)

**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!