graphql-js - 片段不能在此处作为 "Query"类型的对象传播

Question

尝试使用 react 进行中继，今天遇到了这个问题。这是我到目前为止所做的。

根查询:

query {
  tasks {
    id
    taskName
    taskStatus
    userId
  }
}

react 组件层次结构

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

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

任务列表项.js

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

任务列表.js

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

应用程序.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 由五件事组成:

fragment关键字

片段名称

on关键字

Fragment 适用的类型

用大括号括起来的选择集

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

query {
  foo
  bar
}

然后 { foo bar }是我请求的选择集，在本例中是在 Query 上类型(或任何您的查询根操作类型在您的架构中调用)。所以如果我想使用一个片段，我会写:

query {
  ...QueryFields
}

fragment QueryFields on Query {
  foo
  bar
}

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

query {
  ...TaskList_tasks
}

但是，正如错误所示，与 TaskList_tasks 关联的类型片段是 task .但是您不会替换 task 的选择集在此处输入，您将替换 Query 的选择集类型。所以你的请求无效。

TLDR； 您需要将 Fragment 上的类型更改为 Query :

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