Apollo 客户端：mutate 不是函数答案

【问题标题】：Apollo client: mutate is not a functionApollo 客户端：mutate 不是函数
【发布时间】：2018-02-11 00:17:02
【问题描述】：

我从通过参数字段传递道具的父组件调用此组件。但是，当我尝试调用突变函数时，我不断收到错误消息：mutate is not a function。我不明白是什么导致了这个问题，因为我几乎完全按照在线的 apollo 文档进行操作。

const OnboardingComplete = (props, { mutate }) => {

  const currentUser = {
   id: props.id,
   firstName: props.first_name,
   lastName: props.last_name
  }


return (

 <View style={styles.subcontainer}>
        <Button bordered rounded iconLeft
      style={styles.importButton}
      onPress={() => 
        mutate({ variables: { user: currentUser } })
        }>
        <Text style={styles.buttonText}>Complete  </Text>
        <Icon name='arrow-forward' />
      </Button>
      </View>

);
}


const addUser = gql`
  mutation addUser($user: UserInput!) {
    addUser(input: $user) 
  }
`;

  export default graphql(addUser)(OnboardingComplete);

【问题讨论】：

标签： react-native graphql graphql-js apollo apollo-client

【解决方案1】：

当您使用 graphql HOC 包装组件时，它会收到 data 道具（如果您的操作是查询）或 mutate 道具（如果您的操作是突变）。

您的代码表明您希望将第二个对象（而不是 props）作为参数传递给您的组件：

const OnboardingComplete = (props, { mutate }) => {

相反，您的表达式应如下所示：

const OnboardingComplete = (props) => {

您应该通过调用props.mutate 访问mutate。如果你想使用对象解构，你也可以这样做：

const OnboardingComplete = ({ first_name, last_name, id, mutate }) => {

【讨论】：

【解决方案2】：

这也是我这边的问题。我得到了解决方案，因为我将 createApolloClient 作为异步函数，它不应该是异步函数。然后工作正常！

   async function createApolloClient(...)

这会导致错误。

   function createApolloClient(...)

没有错误……很奇怪，但它解决了。

【讨论】：