阿波罗客户端- [未处理的承诺拒绝：错误：响应不成功：收到状态代码 400]

Posted 2023-03-10

【中文标题】阿波罗客户端- [未处理的承诺拒绝：错误：响应不成功：收到状态代码 400]

【英文标题】：apollo client- [Unhandled promise rejection: Error: Response not successful: Received status code 400]

【发布时间】：2021-10-18 02:50:46

【问题描述】：

在 apollo /graphql 链接中获取正确的数据

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

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

mygraphql 查询：

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

在 reactnative 组件中使用 Mutation 方法：

  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 客户端设置文件：

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>
      );
    

我使用 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

【问题讨论】：

graphql 有效负载中定义了data 的变量在哪里？哦，这是react native客户端，不熟悉。

【参考方案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: 
        ...
      
    
  )
, [])