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

Posted 2023-03-08

【中文标题】如何将值传递给 react-router-relay 中的根查询

【英文标题】：how to pass value to the root query in react-router-relay

【发布时间】：2015-12-27 22:16:40

【问题描述】：

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

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

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

【问题讨论】：

目前看来 react-router-relay 不支持此功能 - 有一个 open pull request 通过 prepareVariables 函数提供支持。

【参考方案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（当前版本）。