Apollo Client 400 错误 - bundle.esm.js:60 Uncaught (in promise) 错误：网络错误：响应不成功：收到状态码 400答案

【问题标题】：Apollo Client 400 Error - bundle.esm.js:60 Uncaught (in promise) Error: Network error: Response not successful: Received status code 400Apollo Client 400 错误 - bundle.esm.js:60 Uncaught (in promise) 错误：网络错误：响应不成功：收到状态码 400
【发布时间】：2019-09-27 16:04:28
【问题描述】：

我正在尝试在我的 react 应用程序中连接到 apollo-client，但在运行查询时出现错误 400。如果我在邮递员中使用相同的 url 和相同的查询，它工作得很好。谢谢各位

我已经尝试过使用 apollo-link 但无法正常工作。

const client = new ApolloClient({

    uri: 'http://localhost:3000/graphql',
    onError: (e) => { console.log(e) },
})

client.query({

    query: gql`
    {
        contracts{
            id
        }
    } `
}).then(data => console.log(`Query Result ${data}`))

浏览器出错！！

{operation: {…}, networkError: ServerError: Response not successful: Received status code 400
    at throwServerError (http://loca…, graphQLErrors: undefined, forward: ƒ}forward: ƒ (op)graphQLErrors: undefinednetworkError: ServerError: Response not successful: Received status code 400
    at throwServerError (http://localhost:3000/static/js/bundle.js:37934:17)
    at http://localhost:3000/static/js/bundle.js:37959:13operation: {variables: {…}, extensions: {…}, operationName: null, query: {…}, setContext: ƒ, …}__proto__: Object
bundle.esm.js:60 Uncaught (in promise) Error: Network error: Response not successful: Received status code 400
    at new ApolloError (bundle.esm.js:60)
    at QueryManager.<anonymous> (bundle.esm.js:1184)
    at step (tslib.es6.js:97)
    at Object.next (tslib.es6.js:78)
    at tslib.es6.js:71
    at new Promise (<anonymous>)
    at __awaiter (tslib.es6.js:67)
    at bundle.esm.js:1147
    at bundle.esm.js:1627
    at Array.forEach (<anonymous>)
    at bundle.esm.js:1626
    at Map.forEach (<anonymous>)
    at QueryManager../node_modules/apollo-client/bundle.esm.js.QueryManager.broadcastQueries (bundle.esm.js:1621)
    at bundle.esm.js:1127

我只是想通过控制台记录查询结果以进行测试

【问题讨论】：

正如@Jhm 在下面对答案的评论中所说。在网络选项卡中检查您对请求的响应。它应该有更多信息。

标签： reactjs graphql apollo apollo-client

【解决方案1】：

在 uri 末尾添加一个正斜杠，就像http://localhost:3000/graphql/ 可能无关紧要，但会有所不同。

【讨论】：

没有任何区别。相同的 url 和查询适用于 fetch 和 postman。任何想法
已经从网络选项卡中检查了失败的请求响应的内容吗？

【解决方案2】：

您必须提及获取策略。如果您正在使用当前的反应钩子，那么使用类似这样的东西

import { useQuery, useMutation } from '@apollo/react-hooks';

const Login = () => {
    const [signInResponse] = useMutation(SIGNIN_USER);

    const onSubmit = async (e) => {
        const response = await signInResponse({
            variables:{email:'email',password:'password'},
            errorPolicy:"all"
        });
        console.log(response)
        // dispatch({type:"LOGIN",payload:response.data})
    };
}

【讨论】：

【解决方案3】：

考虑将以下内容添加到您的 Apollo 客户端：

const client = new ApolloClient({ 乌里，缓存：新的 InMemoryCache()，默认选项：{ 观察查询：{ fetchPolicy：'缓存优先' }, 询问： { fetchPolicy：'缓存优先' }, } });

【讨论】：