Насколько гранулированными должны быть фрагменты Relay / Apollo? - PullRequest
0 голосов
/ 31 октября 2018

Я использую GraphQL + Relay в своем приложении и обнаруживаю, что обертываю почти все компоненты с createFragmentContainer, включая очень низкие в иерархии DOM (обычно это функциональные компоненты).

Это правильный способ использования фрагментов? Мне интересно, каковы рекомендации, когда следует обернуть компоненты в контейнеры фрагментов? Кажется излишним, чтобы обернуть компонент, когда ему нужно только одно поле, и я могу передать эти данные от родителя через реквизит.

Я использую Relay, но думаю, что концепции похожи и на Apollo.

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Это ответ моего коллеги Яна Кассенса, который работает в команде Relay:

Если разделение компонентов имеет смысл для вас, вы должны пойти на это. Я считаю, что небольшие модули обычно помогают сделать код более понятным Теперь компоненту Button, вероятно, не нужно прикреплять к нему фрагмент, но если это кнопка «Мне нравится страница» с мутацией и, возможно, меткой, специфичной для страницы, я думаю, что имеет смысл сделать его собственным фрагментом. контейнер.

Как и во многих других инженерных разработках, вероятно, есть компромиссы в разделении слишком большого количества, но мы потратили много времени на то, чтобы сделать фрагментированные контейнеры настолько легкими и эффективными, насколько это возможно, поэтому вам не стоит слишком задумываться представляя накладные расходы.

0 голосов
/ 02 ноября 2018

Да, это так. Вместо того, чтобы запрашивать все данные корневого компонента и передавать другим в качестве реквизитов, вы должны создать контейнеры фрагментов, и каждый из этих компонентов запрашивает свои собственные данные. А благодаря ретрансляции маскированных данных эти данные из фрагментов можно увидеть только внутри компонента, который в них нуждался.

Может быть, это хорошее чтение: https://medium.com/entria/relay-apollo-anti-pattern-d9f4dea47738

И это на Data Masking: https://facebook.github.io/relay/docs/en/thinking-in-relay.html

Надеюсь, это поможет:)

...