Question

我一直在研究中继文档中QueryRenderer https://relay.dev/docs/en/query-renderer和FragmentContainer https://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注入数据作为TodoList props.tdlist，其形状取决于graphql查询的形状。

但是，这似乎没有发生。我在控制台中收到警告：

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

如果不通过tdlist，createFragmentContainer的工作是什么？

我试图通过更改来显式传递todoList数据返回至返回（与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片段来查询所需的内容，并且重新查询是否更改，在获取新数据时更新道具？

我是否需要将道具作为道具显式传递给片段容器，或者如果它们是请求其数据的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-relay不会在QueryRenderer与子孙FragmentContainer组件之间中继任何链接。在您的问题中，传递给QueryRenderer的query道具是

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

代替

query ContainerWithQueryRenderer_Query { TodoList_tdlist }

此外，由于QueryRenderer与Fragment Containers协同工作，因此在查询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 }
    />
  );
}

仅需要一个后代组件，如上所述，它将ContainterWithQueryRenderer与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
    }
  `
});

React Relay createFragmentContainer和QueryRenderer数据流

1 个答案: