Next.js Discord

Discord Forum

How to update "fetches" when compontent is submitted?

Answered
Philippine Crocodile posted this in #help-forum
Open in Discord
Philippine CrocodileOP
What's the way to be able to updated your website when "new data" is coming? I have this return: <main className="min-h-screen bg-gray-100 py-8 px-4">
<div className="max-w-md mx-auto bg-white p-4 rounded-lg shadow-md">
<AddCheck />
</div>
<div className="max-w-md mx-auto bg-slate-50 mt-5 p-2 rounded-lg shadow-md">
<h2 className="text-center font-semibold text-lg text-slate-700 ">
History{" "}
</h2>
{checks.map((WeatherCheck) => {
return (
<Fetch
key={WeatherCheck.id}
id={WeatherCheck.id}
city={WeatherCheck.city}
country={WeatherCheck.country}
currentTemp={WeatherCheck.currentTemp}
currentWeather={WeatherCheck.currentWeather}
currentDate={WeatherCheck.currentDate}
currentIcon={WeatherCheck.currentIcon}
createdAt={WeatherCheck.createdAt}
tomorrowMin={WeatherCheck.tomorrowMin}
tomorrowMax={WeatherCheck.tomorrowMax}
tomorrowWeather={WeatherCheck.tomorrowWeather}
tomorrowDate={WeatherCheck.tomorrowDate}
tomorrowIcon={WeatherCheck.tomorrowIcon}
/>
);
})}
<div></div>
</div>
</main>

Where <AddCheck/> Basically fetches from an api then puts it in my database and my <Fetch/> displays data. But I want the Fetch to display new when I update the database. through my <Addcheck/> I have a "submit" button in my <Addcheck/> that I assume I need to put some listener on ?
Answered by Ray
you should call router.refresh() here
  const addResponse = await fetch("/api/add-fetch", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      city: weatherData.location.name,
      country: weatherData.location.country,
      currentTemp: currentTempAsString,
      currentWeather: weatherData.current.condition.text,
      currentDate: weatherData.location.localtime,
      currentIcon:weatherData.forecast.forecastday[0].day.condition.icon,
      createdAt: new Date().toISOString(),
      tomorrowMin: tomorrowMinAsString,
      tomorrowMax: tomorrowMaxAsString,
      tomorrowWeather: tomorrowWeatherAsString,
      tomorrowDate: tomorrowDateAsString,
      tomorrowIcon:weatherData.forecast.forecastday[1].day.condition.icon,
    }),
    
  }
  );
  if (!addResponse.ok) {
    throw new Error("Failed to add city");
  }
  router.refresh()
View full answer

32 Replies

WebDevSayantan
In the <AddCheck>, where you're inserting new item in your database, (for example a server action ), you can use revalidatePath('your/url/to/the/relevant/page') if your insert is successful to refresh the list which <Fetch /> is using the display the data.
WebDevSayantan
Sure, provide the function that inserts new item in db, and the url which displays <Fetch /> component, I can then show where you can add revalidatePath. .
Philippine CrocodileOP
app\components\Fetch.jsx
I put the revalidatePath in where I thought it was but just got
WebDevSayantan
revalidatePath takes the urlpath as its parameter. You'll need to provide that path.
http://localhost:3000/components/Fetch ?
WebDevSayantan
No. . what is the url for the page.tsx where you're using the following code:
{checks.map((WeatherCheck) => {
          return (
            <Fetch ... />
          )})
}
Philippine CrocodileOP
app\page.tsx
or
localhost:3000
WebDevSayantan
then the call should be like this: 
 revalidatePath('/')
Philippine CrocodileOP
have I put it in the right place?
cause im stil getting this
@Philippine Crocodile Click to see attachment
Ray
revalidatePath only work in server action or route handler. In your case, you could try to use router.refresh() since its a client component or turn /api/add-fetch to server action and use revalidatePath inside it. If you use revalidatePath with server action, it will return the new data in the rsc payload response then the client will update the ui accordingly
American Crow
haha i knew it
Philippine CrocodileOP
with router refresh, when I press submit for an example berlin it display anything the first time I press but it does the second time when I press a third it shows berlin again instead of a "new city"
@Ray could you record a video?
Philippine CrocodileOP
Sure give me a minute
@Ray could you record a video?
Philippine CrocodileOP
@Philippine Crocodile Click to see attachment
Ray
could you show the code of AddCheck again?
@Ray could you show the code of `AddCheck` again?
Philippine CrocodileOP
@Philippine Crocodile Click to see attachment
Ray
you should call router.refresh() here
  const addResponse = await fetch("/api/add-fetch", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      city: weatherData.location.name,
      country: weatherData.location.country,
      currentTemp: currentTempAsString,
      currentWeather: weatherData.current.condition.text,
      currentDate: weatherData.location.localtime,
      currentIcon:weatherData.forecast.forecastday[0].day.condition.icon,
      createdAt: new Date().toISOString(),
      tomorrowMin: tomorrowMinAsString,
      tomorrowMax: tomorrowMaxAsString,
      tomorrowWeather: tomorrowWeatherAsString,
      tomorrowDate: tomorrowDateAsString,
      tomorrowIcon:weatherData.forecast.forecastday[1].day.condition.icon,
    }),
    
  }
  );
  if (!addResponse.ok) {
    throw new Error("Failed to add city");
  }
  router.refresh()
Answer
Ray
and remove the onClick event on the button