react-router - 如何将值传递给 react-router-relay 中的根查询

Question

假设我在带有 react-router-relay 项目的中继中有以下根查询：

export default {
  calc: () => Relay.QL`query queryType ($number: String) { auth (number: $number) }`,
}

的初始值$number来自服务器，就像一个隐藏的输入，我想在我对服务器的第一个查询中使用这个数字。如何$number使用当前的 react-router-relay API 传递给我的查询？这既不是 a 也不queryParam是stateParam。

Answer 1

您应该能够执行以下操作：

import {createHistory} from 'history';
import React from 'react';
import ReactDOM from 'react-dom';
import {Route, Router} from 'react-router-relay';
import MyComponent from './components/MyComponent';
import MyComponentQueries from './routes/MyComponentQueries';

function addAuthParam(params, route) {
  return {
    ...params,
    number: 'SECRET',
  }; 
}

ReactDOM.render(
  <Router
    history={createHistory()}
    createElement={ReactRouterRelay.createElement}>
    <Route
      component={MyComponent}
      path="/thing/:id"
      prepareParams={addAuthParam}
      queries={MyComponentQueries}
    />
  </Router>,
  document.getElementById('relay-root')
);

prepareParams在 v0.6.2 的 react-router-relay 中添加。上述语法也适用于该版本或 v0.7.0（当前版本）。