如何从 Redux 向 AppolloBoost 客户端传递值？答案

【问题标题】：How to pass value to AppolloBoost client from Redux?如何从 Redux 向 AppolloBoost 客户端传递值？
【发布时间】：2019-09-11 05:09:42
【问题描述】：

我想将存储在 redux 中的令牌传递给 ApolloBoost Cliet。你如何使用 redux-react-hook 库来实现这一点？

import ApolloBoost from 'apollo-boost'

const client = new ApolloBoost({
  uri: 'https://api.github.com/graphql',
  request: (operation) =>{
    operation.setContext({
      headers:{
        Authorization: `bearer ${token}`
      }
    })
  }
});

export default client

编辑：在下面尝试但失败了

import {useCallback} from 'react'
import ApolloBoost from 'apollo-boost'
import {useMappedState} from 'redux-react-hook'

const client = new ApolloBoost({
  uri: 'https://api.github.com/graphql',
  request: (operation) =>{
    const mapState = useCallback(state => state.token, [])
    const token = useMappedState(mapState)   
    console.log(token)
    operation.setContext({
      headers:{
        Authorization: `bearer ${token} ` 
      }
    })
  }
});

export default client

【问题讨论】：

标签： redux apollo-boost

【解决方案1】：

下面成功了。我没有为客户端创建单独的文件，而是将代码集成到 App.js 中，然后我能够通过 redux 传递令牌。

import React, {useCallback} from 'react'
import {ApolloProvider} from "react-apollo"
import ApolloBoost from 'apollo-boost'
import {BrowserRouter, Route, Switch, Link} from 'react-router-dom'
import {useMappedState} from 'redux-react-hook'

import SampleComponent from './components/SampleComponent'
import StarredRepos from './components/StarredRepos'
import TokenSession from './components/TokenSession'

export default function App(){

  const mapState = useCallback(state => state.token, [])
  const token = useMappedState(mapState)   

  const client = new ApolloBoost({
    uri: 'https://api.github.com/graphql',
    request: (operation) =>{
      console.log(token)
      operation.setContext({
        headers:{
          Authorization: `bearer ${token} ` 
        }
      })
    }
  });

    return (
      <ApolloProvider client={client}>
        <BrowserRouter>
          <div className="App">
            <div><Link to = {'/SampleComponent'}>SampleComponent</Link></div>
            <div><Link to = {'/StarredRepos'}>StarredRepos</Link></div>
            <div><Link to = {'/TokenSession'}>TokenSession</Link></div>
            <Switch>
              <Route path='/sampleComponent' component={SampleComponent}/>
              <Route path='/StarredRepos' component={StarredRepos}/>
              <Route path='/TokenSession' component={TokenSession}/>
            </Switch>
          </div>
        </BrowserRouter>
      </ApolloProvider>
    );
}

【讨论】：