Reactjs 如何使用React Redux和Apollo client设置React应用程序的索引文件，以便用户管理能够编辑上下文

最初，在我打算将用户管理添加到index.js文件之前，它看起来是这样的，所有功能都按预期运行

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux'
import store from './store'
import ApolloClient from 'apollo-boost'
import { ApolloProvider } from "@apollo/react-hooks"

const renderApp = () => {
    const client = new ApolloClient({
        uri: 'http://localhost:4000/graphql'
    })

    return (
            ReactDOM.render(
                <ApolloProvider client={client}>
                    <Provider store={store}>
                        <App />
                    </Provider>
                </ApolloProvider>,
                document.getElementById('root')
            )
    )
}

renderApp()

store.subscribe(() => (
    renderApp()
))

从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
从“react redux”导入{Provider}
从“./store”导入存储
从“apollo boost”导入apollo客户端
从“@apollo/react hooks”导入{apollo provider}
常量renderApp=（）=>{
const客户端=新客户端({
uri:'http://localhost:4000/graphql'
})
返回(
ReactDOM.render(
,
document.getElementById（'root'））
)
)
}
renderApp（）
store.subscribe（（）=>(
renderApp（）
))

之后，我做了以下更改，希望能够编辑上下文来保存用户令牌，以便它能够管理用户

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux'
import store from './store'
import { ApolloClient } from 'apollo-client'
import { ApolloProvider } from "@apollo/react-hooks"
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { setContext } from 'apollo-link-context'

const renderApp = () => {
    const httpLink = createHttpLink({
        uri: 'http://localhost:4000/graphql',
    })

    const authLink = setContext((_, { headers }) => {
        const token = localStorage.getItem('token')
        return {
            headers: {
                ...headers,
                authorization: token ? `berySecret ${token}` : null,
            }
        }
    })
    const client = new ApolloClient({
        link: authLink.concat(httpLink),
        cache: new InMemoryCache()
    })

    return (
            ReactDOM.render(
                <ApolloProvider client={client}>
                    <Provider store={store}>
                        <App />
                    </Provider>
                </ApolloProvider>,
                document.getElementById('root')
            )
    )
}

renderApp()

store.subscribe(() => (
    renderApp()
))

从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
从“react redux”导入{Provider}
从“./store”导入存储
从“apollo客户端”导入{apollo客户端}
从“@apollo/react hooks”导入{apollo provider}
从“apollo链接http”导入{createHttpLink}
从'apollo cache inmemory'导入{InMemoryCache}
从“apollo链接上下文”导入{setContext}
常量renderApp=（）=>{
const httpLink=createHttpLink({
uri:'http://localhost:4000/graphql',
})
const authLink=setContext（（{headers}）=>{
const token=localStorage.getItem（'token'）
返回{
标题：{
…标题，
授权：令牌？`berySecret${token}`:null，
}
}
})
const客户端=新客户端({
链接：authLink.concat（httpLink），
缓存：新的InMemoryCache（）
})
返回(
ReactDOM.render(
,
document.getElementById（'root'））
)
)
}
renderApp（）
store.subscribe（（）=>(
renderApp（）
))

（重要提示：在index.js文件之外，我没有更改前端中的任何其他内容）

在进行这些更改之后，前端React应用程序似乎无法再到达后端。当我尝试进行相同的Graph QL查询时，我得到了以下带有此错误的响应对象：Network error:response not successful:Received status code 500

（注意：当我通过图形处理后端时，它可以正常工作，我不会遇到任何问题。）

是的

客户端：对象{defaultOptions:{}，disableNetworkFetches:false，querydeplication:true，…}

数据：未定义

错误：错误：“网络错误：响应不成功：收到状态代码500”

fetchMore:函数（）

加载：错误

网络状态：8

---

比较（与游乐场）请求标题-

berySecret

，是否确定？严格检查标题中的用户身份验证不应为

？？