After Building Next js, mutate in SWR is not revalidating

121 Views Asked by At

In Nextjs, I tried the mutate in SWR and works as expected in developement mode.... like validation after posting the data and revalidation from the /api/get is working as expected. but after building next js using npm run build and npm run start, mutate is not validating the data.

'use client'
import useSWR from "swr";
import axios from 'axios';
import { useState } from "react";

export default function Home() {
  const getfetcher = async (...args) => await fetch(...args).then((res) => res.json())
  const { data, error, isLoading, mutate } = useSWR(`/api/get`, getfetcher)
  const [message,setMessage] = useState()

const test = async (e) => {
  e.preventDefault();
    const email = e.target[0].value;
    const username = e.target[1].value;
    const password = e.target[2].value;
    try{
      await axios.post('/api/posts',{email,username,password}).then((res) => {
        setMessage(res)
      })
      // mutate('/api/get',(posts) => [data, ...posts],false);
      mutate();
    }
    catch(err){
      console.log('this is an error',err)
    }
}

  console.log(data)
  console.log(message)
  return (
    <main>
      <form onSubmit={test} method="POST">
        <input type="text" name="email" className="border border-blue-500 px-3 py-1" placeholder='email'></input>
        <input type="text" name="username" className="border  border-blue-500 px-3 py-1" placeholder='username'></input>
        <input type="text" name="password" className="border  border-blue-500 px-3 py-1" placeholder='password'></input>
        <button type="submit"  className="border bg-blue-500 text-white px-3 py-1">Submit</button>
      </form>
    </main>
  )
}

this is the build log after running the npm run build

 ✓ Linting and checking validity of types
 ✓ Collecting page data
   Generating static pages (1/7)  [=   ]
undefined
   Generating static pages (6/7)  [=== ]
 ✓ Generating static pages (7/7)
 ✓ Collecting build traces
 ✓ Finalizing page optimization

   Creating an optimized production build  .Route (app)                              Size     First Load JS
┌ ○ /                                    24 kB           104 kB
├ ○ /_not-found                          883 B          81.3 kB
├ λ /api/delete/deletevehicle/[id]       0 B                0 B
├ ○ /api/get                             0 B                0 B
└ λ /api/posts                           0 B                0 B
+ First Load JS shared by all            80.4 kB
  ├ chunks/864-01ebf6bbfdef24bb.js       27.5 kB
  ├ chunks/fd9d1056-fcb8f27f999df908.js  51 kB
  ├ chunks/main-app-2cc8802d4fa4d626.js  234 B
  └ chunks/webpack-aa48c2a6680c7f21.js   1.69 kB


λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

Am i missing something? Any help appreciated.

0

There are 0 best solutions below