Is it a good idea to use queryData as a store

[baymac]

I want some textfields in my app which modifies the remote data. The textfields are inside QueryComplete and it is only rendered when data is successfully fetched (using React suspense)

RootComp:

const RootComp: React.FC: () => 
  <ErrorBoundary>
    <Suspense fallback={<QueryEditorLoading />}>
      <QueryComplete />
    </Suspense>
  </ErrorBoundary>

QueryComplete:

const QueryComplete: React.FC = () => { 
  const { id: externalId } = useParams<ItemRouteParams>();
  const { data: item } = useComplete({ data_item_external_id: externalId })
  const handleQueryNameChange = (itemName: string) => {
    queryCache.setQueryData(['item', { data_item_external_id: externalId }], (previous: DataItemComplete) => {
    return {
      ...previous,
      item_name: itemName,
    }
  })
}
return <DPTextField value={item.itemName} label="Query Name" setValue={handleQueryNameChange} />

useComplete hook:

export default function useComplete(getCompleteItemRequestParams: GetCompleteItemRequestParams) {
  return useQuery(['item', getCompleteItemRequestParams], getCompleteItem, { refetchOnWindowFocus: false, suspense: true, cacheTime: 1000 * 60 * 1000 });
}

I am a beginner in JS, would like to know if queryData as store is a good idea or should I define a separate store using context API and fill it when queryData is fetched.

Also I am trying to access this data outside of QueryComplete in RootComp with:

const data_item_id = (queryCache.getQueryData(['item', { data_item_external_id: externalId }]) as DataItemComplete).item_id,

Is this a right pattern to substitute a global state with react query (for remote data)?

[wolverineks]

my general rules are:
react context for data that changes synchronously
react-query for data that changes asynchronously

[sshmyg]

How to get cached data and it updates?

[wolverineks]

@sshmyg unless you are asking a question related to this thread, please start another thread