如何处理阿波罗客户端上的突变错误?

Posted

技术标签:

【中文标题】如何处理阿波罗客户端上的突变错误?【英文标题】:how to handle mutation error on apollo client? 【发布时间】:2019-04-19 23:41:54 【问题描述】:

我正在尝试解决如何在 apollo 客户端处理抛出的 apollo-server 突变错误。

这是我对突变 (createCustomer) 的简化实现:

  Mutation: 
    createCustomer: async (_,  photoFile, customer ) => 
      const rootPath = path.resolve("./public");
      const customerPath = path.join(rootPath, "/photos/customers");
      try 
        const 
          dataValues:  customerID, firstname, lastname, email, phone 
         = await models.Customer.create(customer);
        const customerUniqueDir = path.join(customerPath, 
         `$customerID`);
        catch (createCustomerError) 
       // throw new apollo-server error
        throw new UserInputError();
      
    

在客户端我收到以下错误: (第一个不是红色错误只是console.log在客户端的catch块中)

这个错误是由 apollo-link 抛出的:

这是来自服务器的响应:

这里是apollo-client的实现:

import  ApolloClient  from "apollo-client";
import  ApolloLink  from "apollo-link";
import  ErrorLink  from "apollo-link-error";
import  withClientState  from "apollo-link-state";
import  createUploadLink  from "apollo-upload-client";
import  ApolloProvider  from "react-apollo";
import  InMemoryCache  from "apollo-cache-inmemory";
import App from "./App";


const cache = new InMemoryCache(
  addTypename: false
);

const stateLink = withClientState(
  cache,
  resolvers: 
    Mutation: 
  ,
  defaults: 
    customers:  customers: [], count: 0 
  
);
const uploadLink = createUploadLink( uri: "http://localhost:8000/graphql" );
const errorLink = new ErrorLink();

const client = new ApolloClient(
  link: ApolloLink.from([stateLink, errorLink, uploadLink]),
  cache,
  connectToDevTools: true
);

ReactDOM.render(
  <BrowserRouter>
    <ApolloProvider client=client>
        <App />
    </ApolloProvider>
  </BrowserRouter>,
  document.getElementById("root")
);

有什么解决方案如何处理客户端上的突变错误?

感谢回答

【问题讨论】:

【参考方案1】:

解决方案:

错误出现在 apollo-link 中。所以我查看了我的 graphql-client 实现,我意识到我忘了使用 apollo-link-http 模块。

所以我添加了以下代码行:

import  HttpLink  from "apollo-link-http";

const httpLink = new HttpLink( uri: "http://localhost:8000/graphql" );

const client = new ApolloClient(
  link: ApolloLink.from([stateLink,errorLink, httpLink, uploadLink]),
  cache,
  connectToDevTools: true
);

【讨论】:

以上是关于如何处理阿波罗客户端上的突变错误?的主要内容,如果未能解决你的问题,请参考以下文章

表达 http:graphql 突变上的 500 错误以在反应中从阿波罗客户端创建用户

阿波罗突变“在这种环境中,分配的来源必须是一个对象”

如何处理 io.use 中间件来捕获客户端上的错误?

错误:不知道如何处理这种类型的突变。突变不遵循命名约定

Apollo 客户端突变错误和更新组件

如何处理 React Spa 上的刷新令牌?