Propagate POST errors to swr error object

[pke]

In my hooks I am often combining useSWR with mutation functions to update the server resource.

const { session } = useSession()
const { data, error, mutate } = useSWR(session?.id ? ["/v2/order/recipe/summary", session.id] : null,
  (path, sessionId) => get(path, sessionId).then(normalise)
)

const uploadPhoto = React.useCallback((path: string) => {
  return post(..., session.id).then(mutate).catch(setError)
}, [session, mutate]

In my hook callbacks it would be nice to be able to use the already existing and exported swr error for error reporting. Like with a setError function maybe?

Otherwise I'd have to setup a useState for the error that is shared between swr and my post promise rejection.

Any patterns that could help to streamline error reporting?

[sergiodxa]

You can pass a rejected promise to mutate and it will update the cache of the key with the error

mutate(() => Promise.reject(error));

Something like that should work.

[pke]

this does not seem to work though:
Promise.reject(new Error("test")).catch(error => mutate(() => Promise.reject(error)))

All this produces is an Unhandled Promise Rejection warning.

[pke]

This will also invalidate data and set it to `undefined? @sergiodxa?

[radenkovic]

I was about to ask the same question. I am trying to store user object on user key. Throwing error in mutation just breaks the app (Unhandled Rejection (Error): failed). In docs you suggest to handle it (try/catch), but then I don't have info about the error.

I am not sure if this is a good approach -- this is a very common scenario (mutating data and displaying loading state). Also, re-fetching user after mutation is sub-optimal because you have user object in response (1 more useless api call).

Here's a short sample:

import useSWR from 'swr';

const loginAPI = async (data) => {
  const res = await fetch('http://localhost:3030/auth', {
    method: 'post',
    body: JSON.stringify(data),
    headers: {
      'Content-Type': 'application/json',
    },
  });
  if (res.status > 300) throw new Error('failed');
  return res.json();
};

const fetcher = () => {
  const token = localStorage.getItem('sland-jwt');
  if (!token) return null;
  return loginAPI({ access_token: token });
};

export default function useUser() {
  const { data: user, mutate } = useSWR('user', fetcher);

  const login = async (payload) => {
    mutate(() => loginAPI(payload), false);
  };

  return { login, user };
}