Блог

Я хочу передать токен, хранящийся в 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
  

Ниже сделано трюк. Вместо того, чтобы иметь отдельный файл для клиента, я интегрировал код в 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>
    );
}