Question

尝试使用中继进行响应，今天就遇到了这种情况。这是我到目前为止所做的。

根查询：

query {
  tasks {
    id
    taskName
    taskStatus
    userId
  }
}

反应组件层次结构

App   
 ↳--TaskList (props: tasks)
    ↳--TaskListItem (props: task)

现在由于托管原则，我知道我必须在每个组件中编写片段来描述其数据需求。

TaskListItem.js

const TaskListItemContainer = createFragmentContainer(
    TaskListItem,
    graphql`
        fragment TaskListItem_task on task {
            id
            taskName
            taskDone
            authorId
        }
    `
);

TaskList.js

const TaskListContainer = createFragmentContainer(
    TaskList,
    graphql`
        fragment TaskList_tasks on task {
            tasks {
                ...TaskListItem_task
            }
        }
    `
);

App.js

<QueryRenderer
   environment={relayEnvironment}
   query={graphql`
       query AppQuery {
         ...TaskList_tasks
       }
     `
   }

运行中继编译器时，出现以下错误。

Fragment "TaskList_tasks" cannot be spread here as objects of type "Query" can never be of type "task".

App.js (3:15)
2:             query AppQuery {
3:               ...TaskList_tasks
                 ^
4:             }

由于此问题，无法弄清楚如何组织结构。我是否应该仅仅为了促进客户端的片段结构和重用而修改架构？

Answer 1

基本片段由五部分组成：

fragment关键字
片段的名称
on关键字
片段适用的类型
包裹在花括号中的选择集

选择集是使用片段时要指定要请求的类型的一个或多个字段。可以将片段视为单个选择集的替代品。如果我有这样的查询：

query {
  foo
  bar
}

然后{ foo bar }是我要的选择集，在这种情况下，它是Query类型（或在模式中称为查询根操作类型的任何类型）。因此，如果我想使用一个片段，我会写：

query {
  ...QueryFields
}

fragment QueryFields on Query {
  foo
  bar
}

在您的代码中，您正在尝试编写如下查询：

query {
  ...TaskList_tasks
}

但是，如错误所示，与TaskList_tasks片段关联的类型为task。但是，您这里没有替换task类型的选择集，而是替换了Query类型的选择集。因此您的请求无效。

TLDR; ，您需要将片段类型更改为Query：

fragment TaskList_tasks on Query {
  tasks {
    ...TaskListItem_task
  }
}

片段不能作为“查询”类型的对象在此处传播

1 个答案: