当前位置: 首页 > 知识库问答 >
问题:

使用具有不同片段字段的相同中继根查询的多个react路由器中继路由

拓拔松
2023-03-14

我遇到了一个问题,当使用相同的根查询在两个相邻的react-router-中继路由组件中请求数据时,第二个路由组件中的graph ql服务器查询使先前从第一个路由组件中检索到的数据无效。

例如:

我正在使用一种解决方法将字段附加到“查看器”根节点,以便从根字段查询数据数组:

我的schema.js包括查看器(用户)类型和根的以下定义

var GraphQLUser = new GraphQLObjectType({
   name: 'User',
   isTypeOf: function(obj) { return obj instanceof User },
   fields: function() {
      return {
         id: GraphQLRelay.globalIdField('User'),
         //Fields to expose to app, e.g. cars
         cars: {
            type: GraphQLRelay.connectionDefinitions({
               name: 'Car', nodeType: carType
            }).connectionType,
            args: GraphQLRelay.connectionArgs,
            resolve: function(user, args) {
               return
                 GraphQLRelay.connectionFromPromisedArray(getCars(), args)
            },
        },
     }
 },
 interfaces: [nodeDefinitions.nodeInterface],
});

和根:

var Root = new GraphQLObjectType({
   name: 'Root',
   fields: {
      viewer: {
         type: GraphQLUser,
         resolve: (root, {} ) => getUser()
    },
    node: nodeDefinitions.nodeField
});

现在,在main.jsx应用切入点中,我定义了以下路线:

ReactDOM.render(
   <Router createElement={ReactRouterRelay.createElement}>
      <Route path="/" component={App} queries={ViewerQueries} />
      <Route path="/cars" component={AllCars} queries={ViewerQueries} />
  </Router>,
  document.getElementById('ReactContainer'));

与ViewerQueries.js包含:

export default {
   viewer: () => Relay.QL`query { viewer }`,
};

现在,如果App组件包括以下graphql片段:

exports.Component = Relay.createContainer(App, {
   initialVariables: {
      limit: 10
   },
   fragments: {
      viewer: () => Relay.QL`
         fragment on User {
         cars (first: $limit) {
            edges {
              node {
                 name,
              }
            }
          }
       }`,
   },
 })

所有车辆组件包括以下内容:

exports.Component = Relay.createContainer(AllCars, {
   initialVariables: {limit: 10},
   fragments: {
      viewer: () => Relay.QL`
         fragment on User {
            cars (first: $limit) {
               edges {
                  node {
                     name,
                     type
                  }
               }
            }
        }`,
     },
  })

发生的情况是,在路径“/”上呈现应用程序组件时,将毫无问题地返回cars数组。但是,一旦渲染了“/车”路径,将在“this”上生成数组。道具。观众汽车是空的。此外,返回路径“/”以重新呈现应用程序组件现在也会返回空数组。

在后端,AllCars组件似乎会导致额外的到服务器的POST/graphql 200 277.369 ms-94行程,以获取片段中指定的新类型。如果AllCars组件仅包含“name”字段,则Relay不会正确地发出另一个服务器请求,而是使用数据(假定是从最初的应用程序组件服务器请求缓存的)填充阵列。

难道不可能从任何一个组件获取汽车阵列,而中继则获取片段中指定的任何其他数据字段,而不管它们在路线中出现的顺序如何?

任何帮助将不胜感激!

共有2个答案

孔寒
2023-03-14

对于架构中的(示例汽车类型,该问题最终无效。js文件。我最终使用的节点定义是:

 var nodeDefinitions = GraphQLRelay.nodeDefinitions(function(globalId) {
   var idInfo = GraphQLRelay.fromGlobalId(globalId)
     if (idInfo.type == 'Car') {
        return getCarById(idInfo.id)
     } else if ...
       // Other types here
     }
    return null
 });

返回的getCarById函数没有正确解析Car对象,GraphQL服务器无法获取中继请求的其他数据点,导致返回空值,从而有效地使以前获取的Car项无效。

此外,根定义无效,应该是:

var Root = new GraphQLObjectType({
   name: 'Root',
   fields: {
      viewer: {
         type: GraphQLUser,
         resolve: (root, {} ) => getUser()
      },
      node: nodeDefinitions.nodeField
   }
});

错误放置的节点字段定义导致GraphQL服务器抱怨无法在根查询上查询“节点”字段。

在这些更正之后,Relay能够使用不同的数据点查询相同的Root字段,而不管中的位置如何

尽管嵌套路由可能是相同对象类型的主/详细列表的首选,但有时希望在非相关的React组件(例如侧边栏、标题等)中包含相同的数据。

张通
2023-03-14

(作为答案发布,因为我无法在注释中设置代码格式。)

您描述的场景听起来非常适合使用嵌套路由:

ReactDOM.render(
  <Router createElement={ReactRouterRelay.createElement}>
    <Route path="/" component={App} queries={ViewerQueries}>
      <Route path="/cars" component={AllCars} queries={ViewerQueries} />
    </Route>
  </Router>,
  document.getElementById('ReactContainer')
);

如果您仍然看到具有该结构的空数组,您能否提供一个指向包含通过网络发送的查询和响应的要点的链接?

 类似资料:
  • 我在web.php添加了以下路线,但它不起作用。 我的控制器如下所示,我正在使用Ajax发送数据,但收到的错误是Method not allowed exception。 Ajax代码----------------

  • 问题内容: 我正在尝试使用单独的路线,但在我的React App中添加/编辑表单的组件相同,如下所示: 现在,在manageClient组件中,我解析查询参数(我在编辑路由中传递带有客户端ID的查询字符串),并根据传递的查询参数有条件地进行渲染。 问题在于这不会再次重新安装整个组件。假设打开了一个编辑页面,并且用户单击添加组件,URL发生了更改,但是该组件没有重新加载,因此保留在编辑页面上。 有办

  • 问题内容: 我有两个路线组,“动漫”和“漫画”。这些URL是/ anime/或/manga/,但它们都共享完全相同的控制器和模板 (唯一不同的是用于每个模板的配色方案,但这些颜色是在检查是否通过过滤器的过滤器中确定的)正在查看的特定项目是动漫还是漫画) : 动漫陈述定义: 漫画状态定义: 如您所见,其中已经有很多重复,我一点都不喜欢。随着我不断添加新路线,重复次数只会增加 (您已经可以看到mang

  • 我有寻呼路线/电影吗?categoryId=21213在这个页面上,我有一部分演员,点击它应该重定向到/movies?categoryId=21213/演员?actorId=23434234 我应该如何正确地描述用一个actor来渲染我最新的组件?我试过了 但这不起作用

  • 问题内容: 使用以下代码示例,可以使用它,还是必须对其进行调用并显式? 问题答案: 只会解析给定方法的单个类类型,因此,如果您要从多个类继承,并想在两个类中都调用该方法,则需要显式地进行操作。 即

  • 我有两个内核运行在同一个tomcat实例上。我的要求是类似于以下内容: 1。对于单个Solr查询,从Core1返回field1、field2和从Core2返回field3、field4。我需要将所有四个字段作为一条记录返回。 请为我提供一些帮助,以实现这一点在Solr。