лучшая практика для Apollo localStorage с реактивным маршрутизатором - PullRequest
0 голосов
/ 31 октября 2018

Я вообразил сценарий для маршрутизации, который не работал, я не знаю, какое решение тогда принять:

У меня есть URL-адреса, которые я перенаправил как

/levelOne/:levelOne
/levelOne/:levelOne/levelTwo/:levelTwo

ЭСТ ... перед запуском метода рендеринга я сохраняю значения levelOne и levelTwo в localStorage

function renderComplaintHome(props) {
    const LOCAL_CACHE = gql`
            query localCache {
                kind @client
                eid @client
            }
        `

    return (
            <Query query={LOCAL_CACHE}>
                {({data, client}) => {
                    console.log("Writing route params to local cache ", props.match.params)
                    client.writeData({data: props.match.params})
                    return <ComplaintHome {...props}/>
                }}
            </Query>)
}

...
class App extends Component {

    render() {
        return (
                <MuiThemeProvider theme={theme}>
                    <BrowserRouter>
                        <Switch>
                            </Route>
                            <Route exact path="/:kind"
                                         render={renderComplaintHome}>
                            </Route>
                            <Route path="/:kind/search/:name"
                                         render={renderComplaintHome}>
                            </Route>
                            <Route exact path="/:kind/shop/:eid"
                                         render={renderComplaintHome}>

...

это на самом деле работает нормально: если я наберу URL вручную, я найду правильные значения в localStorage

В моих компонентах я использую localStorage в качестве единственного источника истины, поэтому, если я хочу изменить URL-адрес, я изменяю свое локальное состояние, которое вызывает переход к URL-адресу с новыми значениями.

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

onEntitySelected(event, {suggestion}) {
    const data = {name: suggestion.name};
    console.log("writing data to cache: ", data)
    this.client.writeData({data: data})
    window.alert('setting state id to '+ suggestion._id)
    this.eid = suggestion._id
}

render() {
//... some rendering code, then a conditional routing
{this.eid != null && this.eid !== localData.eid && <Redirect to={`/${localData.kind}/shop/${this.eid}`}/>

}

Теперь моя проблема в том, что это не работает: localStorage никогда не обновляется: я получаю ошибку

Предупреждение: невозможно обновить во время существующего перехода состояния (например, в render или в конструкторе другого компонента). Методы рендеринга должны быть чистой функцией реквизита и состояния; побочные эффекты конструктора являются анти-паттернами, но их можно переместить в componentWillMount.

Теперь, если я хочу переместить обновление localStorage в componentWillMount, я не могу этого сделать, поскольку у меня нет параметров URL: маршрут предлагает только метод визуализации:

                    <Route exact path="/:kind/shop/:eid"
                                 render={renderComplaintHome}>

есть идеи, пожалуйста?

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...