React Native项目使用Apollo Client调用mutate和query完成数据交互

一：背景

之前在使用React Apollo时，数据交互都是在他已经封装好的Query，Mutation组件中进行的。但是当数据交互并不是在React Apollo提供的组件中进行，是在render外部的方法中进行的，那该如何？
在这里插入图片描述
目标：
点击右侧“三个点”弹出ActionSheet，点击举报，完成数据交互

这一部分的实现细节看我之前写了一个博客：React-Native使用React-Navigation在顶部导航栏调用外部定义函数
上代码：

class DynamicDetails extends Component {
  static navigationOptions = (
    (props) => {
      return {
        headerRight: (
            <TouchableOpacity onPress={props.navigation.state.params.openActionSheet}>
              <Image source={require('img/threePoints.png')} />
            </TouchableOpacity> 
        ),
      }
    }
  )

  componentDidMount () {
    this.props.navigation.setParams({ openActionSheet: this.actionSheetTest })
  }

  actionSheetTest = () => {
    ActionSheet.show(
      {
        options: ['举报', '取消'],
        cancelButtonIndex: 1,
        destructiveButtonIndex: 0
      },
      buttonIndex => {
        console.log(buttonIndex)
        if (buttonIndex === 0) {
         // 当点击了举报后，该怎么进行下一步？？？？？这一步将会在下面介绍
        }
      }
    )
  }

  render () {
    return <Query query={// 要执行的查询} variables={// 限制条件} }>
      {({ loading, error, data }) => {
        return (
          // 页面渲染的组件
        )
      }}
    </Query>
  }
}

export default DynamicDetails

在前面的文章中React Apollo：Apollo Client在React中的实现方式已经说明了，React Apollo 借助凌驾于整个React Native项目的根组件之上的ApolloProvider组件传递Apollo Client实例：client，来完成Apollo Client的强大功能。因此我们才可以在项目的组件树的任何一个位置上的组件中使用React Apollo的Mutation Query组件实现数据交互。但是！！！当我们的query，mutate不在组件上去实现时，那该怎么办？？
这就是今天要讲的内容。

二：一叶障目，难见泰山

React Apollo 是Apollo Client在React环境中的实现方式。被称为中国式英语。
他只是为了让Apollo Client更方便的使用而已，因为React中是组件的思想，那么在React Apollo中也是组件的思想。但是当我们不在使用组件的思想去使用时，就需要将这一片叶子揭开，看一看他后面的那座泰山：Apollo Client
谓之：一叶障目，难见泰山。

三：云开方见日，潮尽炉峰出

这就是泰山：戳这里，进亲爱的官网
在这里插入图片描述

上面两个方法，和React Apollo中的Query和Mutation方法是一样的效果。但不同的是他是用客户端实例client直接调用的，因此这就不会限制使用的位置。
此外你需要将定义client的代码抽出来单独成为一个模块，这样才能够复用。
上代码：

          const reporteePersonPostId = 获取将要被举报的动态的id
          client.mutate({
            mutation: // 封装好的GraphQL,
            variables: { 
              'input': {
                '_personPostId': reporteePersonPostId
              }
            }
          }).then((reponse) => {
           // mutate之后的返回值
          })
        }
      }
    )
  }

上面这段代码添加到最上面代码中就可以使用举报动态的功能了。
注意事项：
1:mutate和query都是方法，内部的参数你用到什么就去查一下，这里只是基本的两个；
2:mutation是封装好的GraphQL语句的导出名称；
3:variables是匹配的配置，要改变的内容，在query中是查询的限制条件；
4:和Query，Mutation组件不同，内部的key都是使用的双引号包裹，这一点要注意；
5:从上面的两个截图就可以看出来，query和mutate的返回值是promise对象，因此要使用then将返回值获取到，如果想要进行下一步操作，就可以在这里进行操作。

四：最后的话：

1:有些场景其实并不需要这么麻烦的调用，还可以通过React Apollo的加强组件ApolloConsumer来完成，可以通过这个组件获取到client实例。之后的操作，和上面一样。这里就不再介绍，以后有用到再说
在这里插入图片描述

2:有帮助的链接：http://ju.outofmemory.cn/entry/368512
非常感谢
3:如有错误，非常欢迎指正，交流。