1

I think the promise Returned By getRunningQueryThunk does not sync with actual useQuery life cycle in RTKQ.

const args = { name: "pikachu" };

const Pokemon = () => {
  const { data } = useGetPokemonByNameQuery(args);
  const dispatch = useDispatch();

  const thunk = pokemonApi.util.getRunningQueryThunk("getPokemonByName", args);

  const promise = dispatch(thunk as any);

  console.log("promise", promise);

  if (promise) {
    throw promise;
  }

  return (
    <>
      <h3>{data.species.name}</h3>
      <img src={data.sprites.front_shiny} alt={data.species.name} />
    </>
  );
};

export default function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>loading...</div>}>
        <Pokemon />
      </Suspense>
    </div>
  );
}

I tried using React Suspense with RTKQ with api.util.getRunningQueryThunk method, but no matter what I do, the first value of promise is always undefined. I thought because 'useGetPokemonByNameQuery' was called before 'getRunningQueryThunk', the promise returned by dispatch(thunk) should be a promise which is pending, but it is not.

if I put if (!data) { return <div>loading...</div>} for making things work, the promise is logged with 3 times with pending phase.

const args = { name: "pikachu" };

const Pokemon = () => {
  const { data } = useGetPokemonByNameQuery(args);
  const dispatch = useDispatch();

  const thunk = pokemonApi.util.getRunningQueryThunk("getPokemonByName", args);

  const promise = dispatch(thunk as any);

  console.log("promise", promise);

  if (promise) {
    throw promise;
  }


  if (!data) {
    return <div>loading...</div>;
  }

  return (
    <>
      <h3>{data.species.name}</h3>
      <img src={data.sprites.front_shiny} alt={data.species.name} />
    </>
  );
};

export default function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>loading...</div>}>
        <Pokemon />
      </Suspense>
    </div>
  );
}

here is my code sandbox link in case you need this.

https://codesandbox.io/s/jolly-rain-gclhfp?file=/src/App.tsx:522-575

I want to know if I am doing something wrong or not.

thank you.

Song Lee
  • 11
  • 1
  • This is an interesting question which I cannot properly answer (yet!). However you should be aware that this method of throwing a promise is experimental and subject to change. https://stackoverflow.com/questions/59791769/what-is-the-react-official-position-for-throwing-promises-inside-render-function – Linda Paiste Dec 18 '22 at 20:32
  • That said, it definitely works in your code right now. I changed your loading texts so that I can see the difference between "suspense loading" and "component loading" and I also added a delay to your query to make it slow and ensure that we see a loader. With what you have now I get "suspense loading" and it I comment out `throw promise` then I get "component loading". https://codesandbox.io/s/infallible-cori-5chy66?file=/src/App.tsx But I actually would have expected the query status to be `uninitialized` on the first render and it is `pending` so some of my assumptions are wrong. – Linda Paiste Dec 18 '22 at 20:47

0 Answers0