0

我需要一些专业的建议，因为我有点疯了。我正在尝试创建一个结合 Apollo 和 AppSync 的 graphql 客户端。我以前做过这种方法，但它不适用于我刚刚创建的另一个项目。我的情况如下：

  • 客户端似乎正在连接到我的 AppSync 服务器（它正在返回数据中的 __typename），但它没有返回任何其他内容。这是客户端使用的示例以及我得到的响应：
const response = client
        .query({
            query: gql`
                query MyQuery {
                    listSys_users {
                        items {
                            email
                            name
                            active
                            user_id
                        }
                    }
                }
            `,
        })
        .then(console.log);

在此处输入图像描述

  • 我试图调用服务器发出 POST 请求，axios它工作得非常好：
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);

在此处输入图像描述

既然您知道了情况，我将分享我对此的尝试：

  • 知道我有这样的事情：

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;

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",

在这种情况下，响应是相同的，它正在连接，但它null在项目中返回。

是的，我知道，我应该使用creatAuthLinkfrom aws-appsync-auth-link。那是我的第二次尝试。

  • 我的第二次尝试是 using createAuthLink，但是当我尝试使用它时它抛出了这个错误：
./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'

所以我最终安装和使用了@apollo依赖项：

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

仍然得到相同的响应.. 我不会再尝试打扰您了。我已经尝试了这些和更多 apollo / graphql / appsync 依赖项之间的所有可能组合，结果总是相同的：要么我得到带有 __typename 的空响应，要么我得到一个依赖项错误。

注意：我注意到在使用时axios，附加到该解析器的 lambda 会按原样启动，但是当使用另一种方法时，lambda 不会启动，因此显然它不会返回任何数据。

我知道这是一篇很长的帖子，但我正在尽力解释我的情况。而且我无法创建沙盒代码，因为我不想公开 API 凭据。关于我做错了什么有什么想法吗？

提前致谢！！

4

0 回答 0