Как настроить индексный файл приложения React с React-Redux и Apollo-client для администрирования пользователей, чтобы иметь возможность редактировать контекст - PullRequest
Новая
       35

Как настроить индексный файл приложения React с React-Redux и Apollo-client для администрирования пользователей, чтобы иметь возможность редактировать контекст

0 голосов
/ 08 февраля 2020

Изначально, прежде чем я хотел добавить администрирование пользователей в свой индекс. Файл 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()
))

После слов я внес следующие изменения, надеясь, что буду возможность редактировать контекст для хранения токена пользователя, чтобы он мог управлять пользователем. 

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()
))

(ВАЖНО: за пределами индекса. js файл. Я не изменил ничего во внешнем интерфейсе. )

После внесения этих изменений казалось, что внешнее приложение React больше не может достигать серверной части. Когда я пытался выполнить те же запросы Graph QL, я получил следующий объект ответа с этой ошибкой: Сетевая ошибка: Ответ не успешен: Получен код состояния 500.

(ПРИМЕЧАНИЕ. Серверная часть работает так, как и когда я работаю над этим через игровую площадку Graph QL, никаких проблем у меня нет.)

называется: true

client: Object {defaultOptions: {}, disableNetworkFetches: false, queryDeduplication : true,…}

данные: undefined

ошибка: ошибка: «Ошибка сети: ответ не выполнен: получен код состояния 500»

fetchMore: function ()

загрузка: false

networkStatus: 8

...