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:如有錯誤，非常歡迎指正，交流。