фрагмент не может распространяться здесь как объекты типа «Запрос» - PullRequest
Новая
       73

фрагмент не может распространяться здесь как объекты типа «Запрос»

0 голосов
/ 22 апреля 2019

Опробовал эстафету с реакцией и столкнулся с этим сегодня. Вот что я сделал до сих пор.

Root Query: 

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:             }

Не удалось понять, как организовать структуру из-за этой проблемы. Должен ли я изменить схему просто для упрощения структуры и повторного использования фрагментов на стороне клиента?

1 Ответ

1 голос
/ 22 апреля 2019

Основной фрагмент состоит из пяти вещей:

  • ключевое слово 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
  }
}
...