apollo client-[未处理的promise reject: Error: Response not succe

Question

在Apollo中获取正确的数据/graphql link

但是从客户端....执行相同的突变查询我得到这个错误

[Unhandled promise rejection: Error: Response not successful: Received status code 400]

mygraphql查询:

const POSTMESSAGE = gql`
mutation sendChatMessage($data: SendMessageInput!) {
sendMessage(data: $data)
}
`;

useMutation方法在反应性组件中:

const [sendMessage, { loading, error, data }] = useMutation(POSTMESSAGE);

来自组件的突变方法调用:

sendMessage(message);  //correct msg has been passed

我只得到状态码400....描述性错误可能会有所帮助。我从doc那里得到了这个，但不知道如何或何时调用errorLink，这是否有效??还是有其他解决办法?

import { onError } from 'apollo-link-error'
const errorLink = onError(({ graphQLErrors }) => {
if (graphQLErrors) graphQLErrors.map(({ message }) => console.log(message))
})

更新:我使用errorLink, httpLink来获得确切的网络错误，这是我的错误:

[GraphQL error]: Message: Variable "$data" of required type "SendMessageInput!" was not provided., Location: [object Object], Path: undefined
[Network error]: ServerError: Response not successful: Received status code 400
[Unhandled promise rejection: Error: Response not successful: Received status code 400]

注意:我使用与"/graphql"相同的突变和查询变量。

下面是我的Apollo客户端设置文件:

1. App.js:

import { StatusBar } from 'expo-status-bar';
import React, {useEffect} from 'react';
import { StyleSheet, Text, View } from 'react-native';

import {
ApolloClient,
InMemoryCache,
ApolloProvider,
HttpLink,
from,
gql,
useQuery,
useMutation
} from "@apollo/client";

import { onError } from "@apollo/client/link/error";
import ComponentA from './ComponentA'

const httpLink = new HttpLink({
uri: "http://localhost:9543/graphql",
});

const errorLink = onError(({ graphQLErrors, networkError }) => {
console.log("on error function called");
if (graphQLErrors)
graphQLErrors.forEach(({ message, locations, path }) =>
console.log(
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
)
);

if (networkError) console.log(`[Network error]: ${networkError}`);
});

const client = new ApolloClient({
link: from([errorLink, httpLink]),
cache: new InMemoryCache(),
});

export default function App() {
return (
<ApolloProvider client={client}>
<ComponentA />
</ApolloProvider>
);
}

2. 组件文件，我使用useMutation

import React, {useEffect} from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { gql, useMutation } from "@apollo/client";

const POSTMESSAGE = gql`
mutation sendChatMessage($data: SendMessageInput!) {
sendMessage(data: $data)
}
`;

const ComponentA = () => {
const [sendToMessage, { loading, error, data }] = useMutation(POSTMESSAGE);

useEffect(() => {
sendToMessage({"data":{"ChatMessageInput":[{"_id":"307abdf5-5ca9-41c5-b019-837c51de5068","createdAt":"2021-08-12T23:41:41.594Z","text":"Aaa","user":{"_id":"123"}}],"to":"456"}})
}, [])

if (loading) return <Text>Loading...</Text>;
if (error) return <Text>Error :(</Text>;

return (
<View>
<Text>Hello world</Text>
</View>
)
}

export default ComponentA

Answer 1

缺少:变异语法中的变量。得到了Apollo客户社区的帮助:https://community.apollographql.com/t/apollo-client-unhandled-promise-rejection-error-response-not-successful-received-status-code-400/1103/3

useEffect(() => {
sendToMessage({ 
variables: { 
data: {
...
}
}
})
}, [])