magic-amber

How to setQueryState to error

I'm using WebSockets to push new data to the client and calling QueryClient.setQueryState with the new data to update useQuery hooks for that query all over my app. But what about when the state I want to update with is an error? How do I inform the QueryClient of an error?

5 Replies

magic-amberOP•15mo ago

I can invalidate the query and wait for the QueryClient to run the queryFn again for now, but it will be a little late; the same WebSocket message carries updates for other query subscriptions and I'd love to be able to update them all at the same time. Tracing through the code I think this will happen during the current tick, so not bad what I'm hoping for is "don't make React do a bunch of work we're going to throw away" and I just hope Reat 18's automatic batching of setState calls will provide this Ohhh I can just reach in and grab the Query objects and call .setState() on them huh It feels too internals-y, I'd like to call dispatch but that's private I'm unclear on exactly the public API is but it feels like I've stepped beyond it

    if (result.ok) {
      this.queryClient.setQueryData(queryKey, (prev) => {
        if (prev === undefined) {
          // If `prev` is undefined there is no react-query entry for this query key.
          // Return `undefined` to signal not to create one.
          return undefined;
        }
      });
    } else {
      const { error } = result;
      const queryCache = this.queryClient.getQueryCache();
      const query = queryCache.get(queryHash);
      if (!query) return;
      const state = query.state;
      query?.setState({
        error: error as Error,
        errorUpdateCount: state.errorUpdateCount + 1,
        errorUpdatedAt: Date.now(),
        fetchFailureCount: state.fetchFailureCount + 1,
        fetchFailureReason: error as Error,
        fetchStatus: "idle",
        status: "error",
      });
    }

    if (result.ok) {
      this.queryClient.setQueryData(queryKey, (prev) => {
        if (prev === undefined) {
          // If `prev` is undefined there is no react-query entry for this query key.
          // Return `undefined` to signal not to create one.
          return undefined;
        }
      });
    } else {
      const { error } = result;
      const queryCache = this.queryClient.getQueryCache();
      const query = queryCache.get(queryHash);
      if (!query) return;
      const state = query.state;
      query?.setState({
        error: error as Error,
        errorUpdateCount: state.errorUpdateCount + 1,
        errorUpdatedAt: Date.now(),
        fetchFailureCount: state.fetchFailureCount + 1,
        fetchFailureReason: error as Error,
        fetchStatus: "idle",
        status: "error",
      });
    }

And I'm unclear on the implications of dispatching a setState() event instead of an error event

xenial-black•15mo ago

This is not intended

magic-amberOP•15mo ago

@M00LTi it sounds like if I want this I should make a feature request for a stable API for this?

xenial-black•15mo ago

Or you make a workaround: invalidate the query and make it fetch the error itself

magic-amberOP•15mo ago

this probably works, need to reason about whether the errors get propagated the same tick or not

Gaming

Programming

How to setQueryState to error

Did you find this page helpful?