Как правильно организовать useState и useQuery — Apollo/Graphql?

Question

[viktorleg]

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

При клике по чекбоксу категории, ощущение, что происходит обновление страницы, ID добавляется в массив useState[1], происходит фильтрация, но сам чекбокс не выделается. При клике по чекбоксу второй категории, происходит все тоже самое useState[1, 2], но при повторном клике чекбокс выделяется, а ID из массива удаляется useState[1].

Короче, все наоборот начинает работать.

Вот код

const GET_PRODUCTS = gql`
    query GetProducts($filterByCategory: [ID]) {
        products(filters: {category: {id:{in: $filterByCategory}}}) {
        ....
        }
    }
`
const VacanciesPage = () => {
    const [selectCategories, setSelectedCategories] = useState([]);
    
    const getSetSelectedCategories = (category) => {
        console.log(category);
        if(selectCategories.includes(category)){
            setSelectedCategories(selectCategories.filter(item => item != category));
            return;
        }
        setSelectedCategories([...selectCategories, category]);
    }

    useEffect(() => {
        console.log(selectCategories);
    },[selectCategories]);

    const { loading, error, data } = useQuery(GET_PRODUCTS, {
        variables: { "filterByCategory": selectCategories},
    });

    if (loading) return null;
    if (error) return `Error! ${error}`;

    const { products, categories } = data;

    return(
        {categories.data.map(category => (
            <label key={category.id} className="inline-flex items-center mt-3 mr-3">
                <input type="checkbox" className="w-5 h-5" value={category.id} onChange={e => getSetSelectedCategories(+e.target.value)}/><span className="ml-2 text-gray-700">{category.attributes.name}</span>
            </label>
        ))}
    );
}

Подскажите, что я делаю не так. Ощущение, что неправильно организовал код.

Comments

[Alexandroppolus]

Атрибут checked у чекбокса забыт незаслуженно

[viktorleg]

Alexandroppolus, это гениальное замечание спасло мою ситуацию ))) Просто тупо упустил этот момент) Спасибо!

[viktorleg]

Правда код я тоже переделал) Вынес этот кусок кода

variables: { "filterByCategory": selectCategories},

в отдельную функцию