Рубрики
Без рубрики

Вам, вероятно, не нужна UselazyQuery 🙅♂ ️

Моя команда поддерживает довольно простую (React / Apollo) страницу, которая отображает список элементов, фильтрованных и сортировку … Помечено в React, GraphQL, производительность, JavaScript.

Моя команда поддерживает довольно простую (React/Apollo) страницу, которая отображает список элементов, фильтрованных и отсортированных по различным значениям с соответствующими входами. Чтобы уменьшить нагрузку базы данных и устранить неиспользуемый корпус использования, мы решили только запросить список, когда хотя бы один фильтр имеет значение. Это означало отойти от приема через Apollo’s Использование крючок на каждом визуализации.

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

После установки этого он не чувствовал себя правильно, и я понял, что это потому, что это пошло против узоров, которые были разработаны крючки для поощрения. Итак, чтобы добавить в название ClickBait-Y, вам, вероятно, не нужно его Если ваш запрос не запускается явным взаимодействием пользователей или событием .

Аполлон UselazyQuery Обеспечивает функцию для запуска запроса по требованию. Это цель лени; Не делай что-нибудь сейчас, но, возможно, сделать это позже Отказ Но реагирование уже имеет более элегантный способ контролировать это поведение: условный рендеринг.

Возьмите этот компонент пример, используя UselazyQuery ( Первоначальный подход, который я упомянул):

import React, { useState, Fragment } from 'react';
import { useLazyQuery } from 'react-apollo';

const Menu = () => {
    const [food, setFood] = useState('pizza');
    const [search, { data, error, loading }] = useLazyQuery(
        GET_INGREDIENTS,
        { variables: { food } }
    );

    useEffect(() => {
        const shouldSearch = food !== 'pizza';

        if (shouldSearch) {
            search();
        }
    }, [food]);

    return (
        
            
            
        
    );
};

const Ingredients = ({ data }) => data.map(({ name, description }) => (
    
{description}
));

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

Прощественный подход будет рефактором Использование Логика в другой компонент и существует только тогда, когда мы хотим:

const Menu = () => {
    const [food, setFood] = useState('pizza');

    return (
        
            
            
                
            
        
    );
};

const Ingredients = ({ food }) => {
    const { data, error, loading } = useQuery(
        GET_INGREDIENTS,
        { variables: { food } }
    );


    if (error || loading) {
        return null;
    }

    return data.map(({ name, description }) => (
        
{description}
)); };

Это лучше! ✨

Теперь, когда ищете, почему в некоторых состояниях происходит только запрос, я вижу четкую, декларативную логику в оказывать вместо того, чтобы нуждаться в копании через остальную часть компонента.

Опять же, если запрос, который вам нужен, чтобы стать Лестием, вызвано взаимодействием пользователя, шансы являются UselazyQuery это путь к работе. Но если вы торчали на крючок, менталитет, позволяя всем будет двигаться Государство Организация таких компонентов, как это может помочь сохранить ваш код легко следовать!

Оригинал: “https://dev.to/bryce/you-probably-don-t-need-uselazyquery-2icn”