Компонент высшего порядка не фильтрует результаты - PullRequest
Новая
       3

Компонент высшего порядка не фильтрует результаты

0 голосов
/ 24 марта 2020

У меня проблемы с включением этого фильтра Обзор компонентов. Он успешно получает параметр категории из URL. Когда я жестко кодирую категорию непосредственно в gql BROWSE_ALL_POSTS, она работает правильно и отфильтровывается. Однако в его текущем формате он все еще возвращает ВСЕ сообщения. Кто-нибудь знает, что я делаю не так? У меня есть ощущение, что это связано с порядком операций и, возможно, нужно использовать State или использовать Effect здесь где-нибудь? Заранее спасибо 

const Browse = () => {
const { data, loading, error } = useQuery(BROWSE_ALL_POSTS)

if (loading) return 'Loading...'
if (error) return `Error! ${error.message}`

return (
    <>
        <div className="section">
            <div className="container">
                <div className="columns">
                    <div className="column is-one-quarter">
                        <div className={styles.filterBox}>
                            <h3 className={styles.title}>Filter by cause</h3>
                            <form>
                                <input placeholder="Search for a cause" type="text" className={styles.searchInput}></input>
                                <ul className={styles.causeList}>
                                    <li key="adult-education"><input className={styles.checkbox} type="checkbox"/>Adult Education</li>
                                </ul>                                
                            </form>
                        </div>
                    </div>
                    <div className="column">
                        <h2 className="title is-3">Browse Content</h2>
                        <p className="subtitle is-6">Goods have curated an incredible list of movies and TV shows which provide value to the causes listed below. Feel free to check the videos, rate, comment and filter the information based on the causes below.</p>
                        <div className="columns is-multiline">
                            {
                                data.impactArticles.edges.map((item, key) => {
                                    return(
                                        <div className="column is-one-third">
                                            <div key={key}>
                                                <ContentCard 
                                                    item={item}
                                                />
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </>
)
}

const BROWSE_ALL_POSTS = gql`
query ($category: String){ 
    impactArticles (where: {categoryName: $category}){
        edges {
            node {
                id
                title
                slug
                impactArticle {
                    synopsis
                    releaseDate
                    poster {
                        mediaItemUrl
                    }
                    causes {
                        cause {
                            ... on Cause {
                                title
                            }
                        }
                    }
                    charities {
                        charity {
                            ... on Charity {
                                title
                            }
                        }
                    }
                }
            }
        }
    }
}
`

export default graphql(BROWSE_ALL_POSTS, {
options: () => {
    const search = window.location.search
    let params = new URLSearchParams(search)
    const category = params.get('category')
    console.log(category)
    return {
        variables: {
            category
        }
    }
}})(Browse)
...