Rejected query in inner component

Question

TL;DR: Why can't I use "key_one" in both cases?

When a request fails, it causes weird behavior in the following situation: Parent component and child component use the same query key.

Is there something I've missed? If I use different keys "key_one" and "key_two", my app fails gracefully. If I use the same key, my app falls into a loop. In the working example I've used 'key_one' and 'key_two'. This is not optimal, as in normal circumstances I want them to be the same for caching reasons.

Intended result:

Working code:

async function doFetch() {
  throw new Error("Network response was not ok");
}

function MyInnerComp() {
  const { isError, error } = useQuery("key_one", doFetch);

  return (
    <div style={{ border: "1px solid", padding: "10px" }}>
      <h2>Hello from inner component!</h2>
      {isError && <div>Error! {error.message}</div>}
    </div>
  );
}

function Comp() {
  const { isLoading, isError, error } = useQuery("key_two", doFetch);

  if (isLoading) return <div>loading</div>;

  return (
    <div style={{ border: "1px solid", padding: "10px" }}>
      <h2>Parent component.</h2>
      {isError && <div>Error! {error.message}</div>}
      <hr />
      <div>lorem ipsums</div>
      <MyInnerComp />
    </div>
  );
}

Codesandbox: https://codesandbox.io/s/dry-waterfall-21q741?file=/src/index.js

shantr · Accepted Answer · 2022-09-02 15:34:11Z

2

At the very start Comp render and no data has been fetched => useQuery start fetch and isLoading is updated to true
isLoading = true => Comp then render <div>loading</div>
Data is fetched => isLoading = false
isLoading = false => Comp render <div>...<MyInnerComp /></div>
MyInnerComp render => useQuery of MyInnerComp trigger a refetch (as it was rendered after the query was done) => update isLoading to true
=> Comp render again due to isLoading (of the same key) being updated => it render loading and MyInnerComp is unmounted
... infinite loop that trigger query again and again (MyInnerComp will be mounted again like a fresh new component which retrigger useQuery)

In case you use different key, when MyInnerComp render, it does not update isLoading of key_one which does not trigger the loop

If I'm not wrong a solution might be to use isFetched:

function Comp() {
  const { isLoading, isFetched } = useQuery("key_one", doFetch);

  if (isLoading && !isFetched) return <div>loading</div>;

  return (
    <div style={{ border: "1px solid", padding: "10px" }}>
      <h2>Parent component.</h2>
      {isError && <div>Error! {error.message}</div>}
      <hr />
      <div>lorem ipsums</div>
      <MyInnerComp />
    </div>
  );
}

answered Sep 2, 2022 at 15:34

shantr

9544 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hencca Over a year ago

This was a very valuable insight! I didn't realize that react query would trigger isLoading=true everywhere else in the app too. In hindsight it seems obvious.

Wayne Celestin · Accepted Answer · 2022-09-02 15:22:02Z

0

Instead of doing another query you could try to pass it as props / use it directly. Use the error and isLoading directly in the other component

answered Sep 2, 2022 at 15:22

Wayne Celestin

1591 silver badge6 bronze badges

Collectives™ on Stack Overflow

Rejected query in inner component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related