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

谁践踏了优雅 2022-03-18 09:54 271阅读 0赞

## 一：背景 ##

之前在使用`React Apollo`时，数据交互都是在他已经封装好的`Query，Mutation`组件中进行的。但是当数据交互并不是在`React Apollo`提供的组件中进行，是在`render`外部的方法中进行的，那该如何？  
![在这里插入图片描述][20190308162119356.png]  
**目标：**  
点击右侧“三个点”弹出`ActionSheet`，点击举报，完成数据交互  
![在这里插入图片描述][20190308162449115.png]  
这一部分的实现细节看我之前写了一个博客：[React-Native使用React-Navigation在顶部导航栏调用外部定义函数][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_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`  
谓之：一叶障目，难见泰山。

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

这就是泰山：[戳这里，进亲爱的官网][Link 1]  
![在这里插入图片描述][20190308165920215.png]  
![在这里插入图片描述][20190308165931295.png]  
上面两个方法，和`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`实例。之后的操作，和上面一样。这里就不再介绍，以后有用到再说  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20190308173657289.png]  
2:有帮助的链接：[http://ju.outofmemory.cn/entry/368512][http_ju.outofmemory.cn_entry_368512]  
非常感谢  
3:如有错误，非常欢迎指正，交流。

[20190308162119356.png]: /images/20220318/ac4f6db2470848c99c79f149406f743a.png
[20190308162449115.png]: /images/20220318/7a22f5ab1aef4793a5057bae016b9d91.png
[React-Native_React-Navigation]: https://blog.csdn.net/sun_DongLiang/article/details/86679453
[React Apollo_Apollo Client_React]: https://blog.csdn.net/sun_DongLiang/article/details/87907619
[Link 1]: https://www.apollographql.com/docs/react/api/apollo-client.html#ApolloClient.query
[20190308165920215.png]: /images/20220318/aaf778ccede140a0875fe3e0eea7b0ce.png
[20190308165931295.png]: /images/20220318/2bd3987a2d394ff8b3990dde5ec9fe24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]: /images/20220318/bf31f19da06043fc99cba55224816266.png
[20190308173657289.png]: /images/20220318/28b96d04b7154f4dbe5ded3a67235f18.png
[http_ju.outofmemory.cn_entry_368512]: http://ju.outofmemory.cn/entry/368512