AppSync client doesn't returns data

Question

I need some pro advice here because I am going a little crazy. I am trying to create an graphql client combining Apollo and AppSync. I've done this approach before, but it is not working in another project I've just created. My situation is the following:

• It seems that the client is connecting to my AppSync server (it is returning the __typename in the data), but It is not returning anything else. This is an example of the client use and the response I am getting:

const response = client
        .query({
            query: gql`
                query MyQuery {
                    listSys_users {
                        items {
                            email
                            name
                            active
                            user_id
                        }
                    }
                }
            `,
        })
        .then(console.log);

• I've tried to call the server making a POST request with axios and it works perfectly fine:

const axiosWrapper = () => {
    const defaultOptions = {
        baseURL: envConfig.graphQLUrl,
        headers: { 'x-api-key': envConfig.graphQLApiKey },
    };

    const instance = axios.create(defaultOptions);

    return instance;
};

axiosWrapper.post('', {
        query: `
        query MyQuery {
            listSys_users {
                items {
                    email
                    name
                    active
                    user_id
                }
            }
        }
        `,
    }).then(console.log);

Now that You know the situation I will share my attempts on this:

• Right know I have something like this:

The client.js:

import { ApolloLink } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import ApolloClient from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createAuthLink } from 'aws-appsync-auth-link';
import config from './configs/env';

const { graphQLUrl, region, graphQLApiKey } = config;

const auth = {
    type: 'API_KEY',
    apiKey: graphQLApiKey,
    // jwtToken: async () => (await Auth.currentSession()).getAccessToken().getJwtToken(),
};

const authMiddleware = new ApolloLink((operation, forward) => {
    // add the authorization to the headers
    operation.setContext(({ headers = {} }) => ({
        headers: {
            ...headers,
            'x-api-key': 'MY_API_KEY',
            accept: 'application/json, text/plain, */*',
            'content-type': 'application/json;charset=UTF-8',
        },
    }));

    return forward(operation);
});

const client = new ApolloClient({
    link: ApolloLink.from([authMiddleware, new HttpLink({ uri: graphQLUrl })]),
    cache: new InMemoryCache(),
});

export default client;

The App.js:

import 'react-app-polyfill/ie11';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { ApolloProvider } from 'react-apollo';
import { Provider } from 'react-redux';
import App from './App';

import store from './store/reducers/rootReducer';

import './helpers/Translation/i18n';
import Login from './pages/Login';

import client from './client';

ReactDOM.render(
    <ApolloProvider client={client}>
        <BrowserRouter>
            <Provider store={store}>
                <Login>
                    <App />
                </Login>
            </Provider>
        </BrowserRouter>
    </ApolloProvider>,
    document.getElementById('root')
);

Package.json:

"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link": "^1.2.14",
"apollo-link-http": "^1.5.17",
"aws-amplify": "^3.3.27",
"aws-amplify-react-native": "^4.3.2",
"aws-appsync": "^4.1.4",
"aws-appsync-react": "^4.0.10",
"graphql": "^15.6.1",
"graphql-tag": "^2.12.5",

In this case the response is the same, it is connecting but it returns null in the items.

Yes, I know, I should use the creatAuthLink from aws-appsync-auth-link. Thats my second attempt.

• My second attempt was using createAuthLink, but when I tried to use it It throw this error:

./node_modules/aws-appsync-auth-link/lib/auth-link.js
Module not found: Can't resolve '@apollo/client/core' in '/Users/VIU/GEOACTIO/smart-pockets/smart-pockets-react/node_modules/aws-appsync-auth-link/lib'

So I ended up installing and using the @apollo dependencies:

client.js:

import { ApolloClient, ApolloLink, HttpLink, InMemoryCache } from '@apollo/client';
import { createAuthLink } from 'aws-appsync-auth-link';
import config from './configs/env';

const { graphQLUrl, region, graphQLApiKey } = config;

const auth = {
    type: 'API_KEY',
    apiKey: graphQLApiKey
};

const client = new ApolloClient({
    link: ApolloLink.from([
        createAuthLink({ auth, region, url: graphQLUrl }),
        new HttpLink({ uri: graphQLUrl }),
    ]),
    cache: new InMemoryCache(),
});

export default client;

package.json:

"@apollo/client": "^3.4.16",
...all the same

Still getting the same response.. I won't bother You with more attempts. I've tried all the possible combination between these and more apollo / graphql / appsync dependencies and the outcome is always the same: either I get the null response with the __typename or I get a dependencies error.

NOTE: I've noticed that when using axios, the lambda attached to that resolver fires up as it should, but when using another approach, the lambda doesn't fire up, so obviously it won't return any data.

I know it is a long post but I am trying to explain the best I can my situation. And I can't create a sandbox code because I don't want to expose the API credentials.. Any ideas of what I am doing wrong?

Thanks in advance!!