Location of 'await' in examples/next.js/pages/login.jsx

[davebm1]

Should lines 24/25 of examples/next.js/pages/login.jsx read :-
...
24 mutateUser(
25 await fetchJson("/api/login", {
...

and not :-
...
24 await mutateUser(
25 fetchJson("/api/login", {
...

I was getting intermittent login problems on a slower connection. Making the above change resolved this.

Thanks...

[vvo]

@davebm1 I think you're right but I never got really down to the root cause/which way we should do mutate/fetch.

Can you investigate the root cause and what's the best way to do "mutate local + fetch"? We're using https://github.com/vercel/swr

It's true that on my own app code I tend to do mutate and then await fetch instead of await end then fetch.

Then we can safely update the example code here and in the Next.js repo (https://github.com/vercel/next.js/blob/canary/examples/with-iron-session/pages/login.js)

[davebm1]

The promise is returned from fetch, not from swr, so mutate..await..fetch seems the better option.

This approach seems to be supported on the swr npm page https://www.npmjs.com/package/swr
with a couple of examples:-

Section: Mutate Based on Current Data:-

mutate('/api/users', async users => {
const user = await fetcher('/api/users/1')
return [user, ...users.slice(1)]
})

and
section: Prefetching Data:-

function prefetch() {
mutate('/api/data', fetch('/api/data').then(res => res.json()))
// the second parameter is a Promise
// SWR will use the result when it resolves
}

The next-iron-session example also uses await this way for logout in
https://github.com/vvo/next-iron-session/blob/master/examples/next.js/components/Header.jsx

onClick={async (e) => {
e.preventDefault();
mutateUser(
await fetchJson("/api/logout", { method: "POST" }),
false,
);
router.push("/login");
}}

I was getting intermittent authentications problems with await..mutate..fetch with failure to redirect
after authentication. This was resolved by changing to mutate..await..fetch.

Regards...

[vvo]

Thanks, just updated the examples 🙏