How to globally control conditional first load of data & subsequent reloads

[Ewan-S]

We have a use case whereby we need to wait for 2 requests to complete before we load our data using RTK query, the first to a web socket service and the 2nd as a request to our Backend API.
To achieve this, we wrap our app screens in a AppScreen component, and our application screens provide a loadData() function which is passed into the AppScreen wrapper component like this:

const loadData = useLazyQuery()

return (
    <AppScreen loadData={loadData}>
      <View>
     ... display loaded data...
      </View>
    </AppScreen>
  );

Then, inside our AppScreen we have an effect which basically ensures that the web socket has connected and the API request has returned successfully at which point it calls the loadData function which uses a lazy query to load the data. We also use the loadData function to reload data later on if we have to reconnect to the 2 original requests.
We've tried using the skip, but to achieve this we would have to implement the logic in every place we call the query. Ideally, we want to not have to implement the skip and lazy query everywhere.

Essentially what we want to know is can you think of a better way to control when the data gets loaded? Is there a way of doing this without using the lazy query and instead using the standard query hook?

We're happy to provide any additional information if you have any further questions.