React-Apollo Client- структурирующие компоненты

Question

Скажем, компонент - TodoList должен показывать список TODO двумя различными способами: listview и gridview. На странице есть переключатель, который переключает между представлениями. Предполагая, что я хочу сохранить 2 представления в качестве разных компонентов, что является наилучшей практикой -

1. создать компонент TodoList с запросом graphql, а затем передать результат запроса компонентам TODOListView и TODOGridView?

2. создать компонент TodoList с запросом NO graphql, а затем написать тот же самый запрос grqphql в компонентах TODOListView и TODOGridView (не DRY, дублирование запросов в каждом компоненте, но кэш-память apollo будет следить за тем, чтобы он не вызывался несколько раз)?

хорошо / плохо с каждым подходом?

Answer 1

ИМХО реального выбора нет , использование кеша в качестве аргумента не имеет значения, тогда как при втором подходе нет ничего хорошего.

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

Предполагая, что я хочу сохранить 2 вида как разные компоненты

ИМХО, это тоже неверное предположение. Конечно, вы можете сделать это, но списки почти одинаковы, реальная разница в рендеринге элементов / строк. Если это простые наборы стилей, измените (или добавив несколько элементов), тогда даже не нужно использовать компоненты для элементов , только условный рендеринг. Вы можете изменить / изменить его позже.

Используя компоненты элементов, вы можете иметь дополнительный уровень абстракции и более сложные варианты использования. С переданным (в элементы) обработчиком переключения типа я смог изменить его (глобально) с простого уровня элемента или локально изменить тип представления элемента - смешанный список элементов.