首页 > 解决方案 > React Apollo - 处理过滤

问题描述

我目前正在使用 Apollo 构建一个反应应用程序。我的目标是有一个返回所有数据的初始请求。然后在我的 FilterSidebar 中使用这些数据来生成所有过滤器,以及在画布中呈现实际数据。

如果然后使用来自 FilterSidebar 的过滤器,则调整后的过滤器变量将传递给其父级。Apollo 检测到更改并再次触发查询。

此时我不希望将数据再次传递给 FilterSidebar,因为我不希望重新创建和重新渲染过滤器。

我的问题是,是否有可能避免再次将道具传递给 FilterSidebar?或者创建另一个 Apollo 请求会更好,它根本不使用任何变量,将它的初始数据传递给 FilterSidebar,如果过滤器被重置(从缓存加载查询)最终可以再次使用?

希望我的问题很清楚。提前致谢

const App = () => {

    const [query, setQuery] = useState("{\"name\": {\"$LIKE\": \"%\"}}")


    const { loading, data, error } = useQuery(REQUEST_INQUIRIES, {
        variables: { filters: query }
    })

    // return loading animation here
    if (loading) {
        return <Loader />
    }
    // return some kind of error message here
    if (error) return(
        <p>Error...</p>
    )

    const doFilter = (query) => {
        setQuery(query)
    }

    const { edges } = data

    return (
        <div>
            <FilterSidebar attributes={edges} doFilter={doFilter} />
            <Canvas data={edges} />
        </div>
    )
}

export default App;

标签: reactjsfilterreact-apolloreact-props

解决方案


推荐阅读