react-router-relay 的子路由查询错误

Posted 2023-03-08

【中文标题】react-router-relay 的子路由查询错误

【英文标题】：Sub route queries error for react-router-relay

【发布时间】：2016-10-06 09:14:24

【问题描述】：

我的部分路线是这样设置的：

<Route path=":widgetId" component=Widget queries=
    viewer: () => Relay.QL`query  viewer `,
    widget: () => Relay.QL`query  widget(widgetId: $widgetId) `
>
    <Route
        path="details"
        component=Details
        queries= widget: () => Relay.QL`query  widget(widgetId: $widgetId) ` 
    />
</Route>

但是，我收到以下错误：

Error:  Invariant Violation: Relay(Details).getFragment(): `viewer` is not a valid fragment name. Available fragments names: `widget``.

路由:widgetId 的查询是否有效？如果我从***路由中删除查看器，一切正常。

编辑：这是详细信息片段：

export default Relay.createContainer(Details, 
    fragments: 
        widget: () => Relay.QL`
            fragment on Widget 
                id,
            
        `
    
);

编辑：这里是小部件片段：

export default Relay.createContainer(Details, 
    fragments: 
        widget: () => Relay.QL`
            fragment on Widget 
                id,
            
        `
        viewer: () => Relay.QL`
            fragment on Viewer 
                id,
            
        `
    
);

注意：我使用的是同构中继路由器

【问题讨论】：

您是否在Widget 中继容器中定义了片段viewer？

@AhmadFerdous 是的，片段查看器在我的 Widget Relay 容器中。如果我取出带有路径“详细信息”的路线，我不会抛出错误。所以我相信错误来自查询的设置方式？

Invariant Violation: Relay(Details).getFragment() Details 组件上。可以添加 fragments 的 Relay 容器 Details 吗？

@AhmadFerdous 我已添加详细信息片段

你最后运气好吗？我遇到了与 react-router-relay 几乎相同的问题。

【参考方案1】：

看起来您需要在 Widget 类中添加一个查看器片段，即：

export default Relay.createContainer(Widget, 
  fragments: 
    widget: () => Relay.QL`
      fragment on Widget 
        id,
      
    `,
    viewer: () => Relay.QL`
      fragment on ObjectType 
        fields
      
    `
  
);

【讨论】：

嘿@Jamie S，如果您查看上面的 cmets，您会看到我的小部件类中确实有查看器片段。错误还指出viewer 不是 Detail 类中的有效片段名称

我在回答中犯了一个错误，我注意到您更新的问题中也是如此。不确定这是否是复制粘贴错误，但在您使用 Details 类的 Widget 代码中。否则，我在您发布的代码中看不到问题。这与我使用 react-router-relay 设置路由的方式几乎相同