Я пытаюсь добавить auth token
к каждому запросу Apollo, но я получаю следующую ошибку при попытке запустить мой проект. Я следовал рекомендуемой реализации здесь Apollo Auth . Я использую React, @ apollo / client "^ 3.0.0-beta.19", "@ apollo /act-hooks": "^ 3.1.3":
TypeError: Object(...) is not a functionindex_bundle.js line 902 > eval:52:77
Policies webpack:///./node_modules/@apollo/client/cache/inmemory/policies.js?:52
InMemoryCache webpack:///./node_modules/@apollo/client/cache/inmemory/inMemoryCache.js?:39
<anonymous> webpack:///./src/index.js?:59
js http://localhost:8080/index_bundle.js:6113
__webpack_require__ http://localhost:8080/index_bundle.js:727
fn http://localhost:8080/index_bundle.js:101
<anonymous> webpack:///multi_(webpack)-dev-server/client?:3
0 http://localhost:8080/index_bundle.js:6815
__webpack_require__ http://localhost:8080/index_bundle.js:727
<anonymous> http://localhost:8080/index_bundle.js:794
<anonymous> http://localhost:8080/index_bundle.js:797
My index.js
( root моего проекта) здесь:
import React from 'react'
import ReactDOM from 'react-dom'
import 'bootstrap/dist/css/bootstrap.min.css'
import { BrowserRouter } from 'react-router-dom'
import Switch from './config/switch'
import { createBrowserHistory } from "history"
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee, faPhoneAlt, faChevronLeft, faChevronRight, faCaretDown, faCaretUp, faShare, faGripLines, faLock, faSave, faTimesCircle, faCalendar, faDivide, faShoppingCart, faMapPin, faFax, faSearch} from '@fortawesome/free-solid-svg-icons'
import { faFacebookF, faLinkedinIn, faTwitter, faYoutube } from '@fortawesome/free-brands-svg-icons'
import { ApolloProvider } from '@apollo/react-hooks'
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client'
import { setContext } from 'apollo-link-context'
import ContextProvider from './config/provider'
import 'index.css'
library.add(fab, faCheckSquare, faCoffee, faPhoneAlt, faChevronLeft, faChevronRight, faCaretDown, faCaretUp, faShare, faGripLines, faLock, faSave, faTimesCircle, faCalendar, faDivide, faShoppingCart, faFacebookF, faLinkedinIn, faTwitter, faYoutube, faMapPin, faFax, faSearch)
const customHistory = createBrowserHistory()
const httpLink = createHttpLink({
uri: `${process.env.API_URL}/graphql`
})
const authLink = setContext((_, { headers }) => {
// get the authentication token from local storage if it exists
const token = localStorage.getItem('apiToken')
// return the headers to the context so httpLink can read them
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : null
}
}
})
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache()
})
ReactDOM.render(
<ApolloProvider client={client}>
<ContextProvider>
<BrowserRouter history={customHistory}>
<Switch />
</BrowserRouter>
</ContextProvider>
</ApolloProvider>
, document.getElementById('index')
)