Context:
The idea is that there is root component which contains three basic children: Filter Input/Select Fields, List of Items, and Page based Paginator.
There are two parts of data that needs to be fetched: Options for the select fields, and the list of items, for which the connection includes page cursors information.
Minimum code as follows:
Parent
const RootQuery = graphql`...`
export default function Root() {
const [RootQueryRef, loadQuery] = useQueryLoader<RootQueryType>(RootQuery);
const pageAfter = useParam('after')
useEffect(() => {
loadQuery({ after: after })
}, [after])
returns...
<SelectField... />
<SelectField... />
<ListItems queryRef={RootQueryRef} ... />
ListItems
imports RootQuery
export default function ListItems({ queryRef }) {
const data = usePreloadedQuery(RootQuery, queryRef);
returns...
data.listData.map(edge =>
<ListItems data={edge.node>
)
<Paginator pageCursors={data.pageCursors} />
}
So the paginator is actually a child of ListItems, which sets url params for page. The root component reads that param and reloads when page changes.
It is expected that upon page change only the ListItems component rerenders, which currently works as expected, however, the ListItems gets its data by calling usePreloadedQuery, but the filter fields actually live in the Root component, and their values are saved in state instead of the url. So I'm confused as to how they get the preloaded options data when they are in the root component that calls useQueryLoader. I don't want to use a separate container for the filter fields because then I would need to pass down a bunch of input states from root (lifting state) in order to use their values for filtering.
I'm not sure whether my structure for the queries is correct at all, it feels counter-intuitive and messy. I am new to Relay so please let me know if there is a more desirable pattern.