如何获得突变反应?

Posted

技术标签:

【中文标题】如何获得突变反应?【英文标题】:How to get the mutation response? 【发布时间】:2020-06-18 11:11:25 【问题描述】:

我在我的 reactjs 应用程序中成功地进行了这种突变,但我想获得 graphql 返回的响应,但在我的 reactjs 应用程序中,这可能吗?

反应代码:

import  useMutation  from "@apollo/react-hooks";      

const [addStoreToDB,  error ] = useMutation(addStoreMutation);

  if (error) 
    console.log("error:", error);
    return <p>Error :(</p>;
  

  const handleSubmit = event => 
    event.preventDefault();
    dispatch(addStoreAction(newStore));
    addStoreToDB(
      variables: 
        name: newStore.name,
        address: newStore.address,
        description: newStore.description,
        phone: newStore.phone,
        picture1: newStore.picture1
      ,
      refetchQueries: [ query: getStoresQuery ]
    );
  ;

在 GraphQL 中:

mutation 
  addStore (name:"Lorem ipsum", address:"Lorem ipsum", description:"Lorem Ipsum", phone:"555555", picture1:"https://lorem-ipsum") 
    id
  

【问题讨论】:

这当然是可能的。文档中非常清楚地介绍了这一点:apollographql.com/docs/react/data/mutations。 useMutation 钩子不会在组件渲染时自动执行你传递给它的突变。 【参考方案1】:
const [addStoreToDB,  error ] = useMutation(addStoreMutation
    
      onCompleted: (data) => 
        console.log(data) // the response
      ,
      onError: (error) => 
        console.log(error); // the error if that is the case
      ,
    
  );

【讨论】:

【参考方案2】:

useMutation 返回的mutation 函数是一个promise。所以你可以使用.then.catch

 addStoreToDB(...stuff)
     .then(response => 
      //handle response
      )
     .catch(err =>
     //handle error
    )

【讨论】:

以上是关于如何获得突变反应?的主要内容,如果未能解决你的问题,请参考以下文章

如何从单个反应组件中调用多个 graphql 突变?

Apollo/graphQL:如何将乐观 UI 用于嵌套反应组件的突变?

如何在反应js中将graphql列表传递给apollo中的突变

如何将反应形式的值传递给突变(变量)?

如何在 x 时间后重新渲染反应(突变阿波罗)

制作自定义反应钩子以执行查询和突变