reactquery] suspense option

이름·2022년 12월 23일

https://react-query-v3.tanstack.com/guides/suspense#_top

In addition to queries behaving differently in suspense mode, mutations also behave a bit differently. By default, instead of supplying the error variable when a mutation fails, it will be thrown during the next render of the component it's used in and propagate to the nearest error boundary, similar to query errors. If you wish to disable this, you can set the useErrorBoundary option to false. If you wish that errors are not thrown at all, you can set the throwOnError option to false as well!

When using suspense mode, status states and error objects are not needed and are then replaced by usage of the React.Suspense component (including the use of the fallback prop and React error boundaries for catching errors).

success: Your query was successful, and you have data for it
error: Your query did not work, and an error is set
loading: Your query has no data and is currently loading for the first time
idle: Your query has never run because it's not enabled
function fetchUser(userId) {
  let user = null;
  let error = null;
  const suspender = fetch(
    `https://jsonplaceholder.typicode.com/users/${userId}`
  )
    .then((response) => response.json())
    .then((data) => {
      setTimeout(() => {
        user = data;
      }, 3000);
    }).catch(err => {
    	error = err;
    },3000);
  return {
    read() {
      if (user === null) {
        throw suspender;
      } if (erorr !== null) {
		throw erorr;
      }else {
        return user;
      }
    }
  };
}
profile
글 솜씨를 기르자!

0개의 댓글