useQuery() with listener rather than fetching
hello! i've been using react-query for several months now in a project to fetch data-mined game data with great success. i have a secondary use case now where i do not want to fetch, but rather listen for updates and modify the query data state to append new data as it is retrieved.
i am not interested in pagination in this case (so i don't think useInfiniteQuery etc is applicable) as i use virtualisation to manage what is rendered on the page. the goal is to have a single array that will render as i scroll which im handling with a separate library - so no pages
i would like to know what the recommended strategy is for modifying query data without refetching - can it be done with one of the values within useQuery's return or do i need to use something lower level like accessing useQueryClient and using setQueryData?
i've made an example approach i am considering using in codesandbox with queryClient.setQueryData. is this approach fine, are there any pitfalls to doing this, and is there any alternative preferred approaches for listeners?
https://codesandbox.io/s/react-query-listener-example-7el2l8?file=/src/App.tsx
i am not interested in pagination in this case (so i don't think useInfiniteQuery etc is applicable) as i use virtualisation to manage what is rendered on the page. the goal is to have a single array that will render as i scroll which im handling with a separate library - so no pages
i would like to know what the recommended strategy is for modifying query data without refetching - can it be done with one of the values within useQuery's return or do i need to use something lower level like accessing useQueryClient and using setQueryData?
i've made an example approach i am considering using in codesandbox with queryClient.setQueryData. is this approach fine, are there any pitfalls to doing this, and is there any alternative preferred approaches for listeners?
https://codesandbox.io/s/react-query-listener-example-7el2l8?file=/src/App.tsx
CodeSandboxmpyoo
react-query listener example by mpyoo using @emotion/react, @mantine/carousel, @mantine/core, @mantine/dates, @mantine/form, @mantine/hooks, @mantine/modals, @mantine/notifications, @mantine/prism
