React Relay创建FragmentContainer和QueryRenderer数据流

Question

我一直在为QueryRenderer研究中继文档中的示例https://relay.dev/docs/en/query-renderer和FragmentContainerhttps://relay.dev/docs/en/fragment-container

我对HOC createFragmentContainer中封装的组件如何访问数据感到困惑。

我有一个顶级的QueryRenderer:

function renderFunction({error, props}) {
...
if (props) {
// Added todoList as a prop with a distinct name from tdlist which
// is meant to be passed in by createFragmentContainer
return <TodoList todoList = {props.todoList} />
}
...
}
export default function ContainerWithQueryRenderer() {
return (
<QueryRenderer
environment={environment}
query={graphql`
query ContainerWithQueryRenderer_Query {
todoList {
title
todoListItems { text isComplete}
}
}`}
render = { renderFunction }
/>
);
}

以及一个TodoList组件，它定义了graphql片段中需要什么数据：

import React from 'react';
import TodoItem from './TodoItem.js';
import { createFragmentContainer } from 'react-relay';
import graphql from 'babel-plugin-relay/macro';
function TodoList(props) {
console.log('TodoList props:',props);
if (props && props.todoList && props.todoList.todoListItems && props.todoList.title) {
return (
<div className='list-container'>
<div className='list-header'>
<div className='list-header-label'>{props.todoList.title}</div>
</div>
<div className='list'>{props.todoList.todoListItems.map( (item, key) => <TodoItem key = {key} item={item} />)}</div>
</div>
);
} else {
return null;
}
}
export default createFragmentContainer(TodoList,{
tdlist: graphql`
fragment TodoList_tdlist on TodoList {
title
todoListItems {
...TodoItem_item
}
}
`,
})

和一个子TodoListItem

import React from 'react';
import { createFragmentContainer } from 'react-relay';
import graphql from 'babel-plugin-relay/macro';
function TodoItem(props) {
return <div className='list-item'>
<div className='list-item-label'>{props.item.text}</div>
{props.item.isComplete ?<div className='list-item-buttons'>Done</div>:null}
</div>
}
export default createFragmentContainer( TodoItem,{
item: graphql`
fragment TodoItem_item on Todo {
text isComplete
}
`
});

我的理解是，TodoList的createFragmentContainer将从TodoList_tdlist fragemnt注入数据作为TodoListprops.tdlist(，根据graphql查询的形状进行整形。

然而，这似乎并没有发生。我在控制台上收到警告：

Warning: createFragmentSpecResolver: Expected prop `tdlist` to be supplied to `Relay(TodoList)`, but got `undefined`. Pass an explicit `null` if this is intentional.

如果createFragmentContainer不在tdlist中传递，它的工作是什么？

我试图通过更改回来到回来(createFragmentContainer传递的道具名称相同，我(可以理解(得到了一个不同的错误：

Warning: RelayModernSelector: Expected object to contain data for fragment `TodoList_tdlist`, got `{"title":"Your to-do list","todoListItems":[{"text":"Brush teeth","isComplete":false},....

我认为我困惑的根源是不理解定义数据依赖项的片段如何与QueryRenderer交互。我是否需要定义查询来提取可能需要的每一段数据，关键是中继只会通过查看现在正在渲染的组件的graphql片段来查询所需的内容，如果情况发生变化，则会重新查询，并在获得新数据时更新道具？

我是否需要将props作为props显式地传递到片段容器，或者如果它们是请求其数据的QueryRenderer的后代，createFragmentContainer是否能够通过中继环境访问它？

这是我的graphql.schema来帮助：

type Query {
todoList: TodoList!
}
type Todo {
text: String!
isComplete: Boolean!
}
type TodoList {
title: String!
todoListItems: [Todo]!
}

Answer 1

您必须在QueryRenderer中命名子片段容器的GraphQL片段。在不识别片段的情况下，react中继在QueryRenderer和子代FragmentContainer组件之间没有中继任何链接。在您的问题中，传递给QueryRenderer的query道具是

query ContainerWithQueryRenderer_Query { todoList { title todoListItems { text isComplete }}}

而不是

query ContainerWithQueryRenderer_Query { TodoList_tdlist }

此外，由于QueryRenderer与Fragment Containers协同工作，因此在Query Renderer中迭代todoListItems并为TodoItem_item使用片段更简单。因此，下面我合并了上面的<ContainerWithQueryRenderer />和<TodoList />

这种方法有效：

TodoListWithQueryRenderer.js:

function renderFunction({error, props}) {
...
if (props) {
return (
<div>
<div>
<div>{props.todoList.title}</div>
</div>
<div>{props.todoList.todoListItems.map( (item, key) => <TodoItem key = {key} item={item} /> )}</div>
</div>
);
}
...
}
export default function TodoListWithQueryRenderer() {
return (
<QueryRenderer
environment={environment}
query={graphql`
query TodoListWithQueryRenderer_Query { todoList {todoListItems {...TodoItem_item } title} }
`}
render = { renderFunction }
/>
);
}

只需要一个子代组件，因为上面将ContinterWithQueryRenderer与TodoList组件合并。

TodoItem.js:

import React from 'react';
import { createFragmentContainer } from 'react-relay';
import graphql from 'babel-plugin-relay/macro';
function TodoItem(props) {
return <div>
<div>{props.item.text}</div>
{props.item.isComplete ? <div>Done</div> : null}
</div>
}
export default createFragmentContainer( TodoItem,{
item: graphql`
fragment TodoItem_item on Todo {
text isComplete
}
`
});