Next.js Discord

Discord Forum

Caching issue

Answered
Giant Chinchilla posted this in #help-forum
Open in Discord
Giant ChinchillaOP
Hi, i have two components, one is a form for creating a category and the second one is a form for creating a product that uses these categories (user selects them from a <select> element). My issue is this: when i create this category, and go to the form for creating the product, the data doesn't update like it should (the new categories are missing, maybe because the form is cached?). Only fix i found is redeploying the whole website.
Answered by Ray
yep, add this
export const dynamic = 'force-dynamic'
View full answer

22 Replies

Giant ChinchillaOP
CategoryForm.tsx
"use client";

const CategoryForm = ({ type }: Props) => {
  const [category, setCategory] = useState<string>("");

  ...

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    try {
      const data = (
        await axios.post("/api/create-category", {
          category: category,
        })
      ).data;

    ...
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="flex flex-col gap-2 p-2 border rounded"
    >
      <div className="flex flex-col">
        <label>Název nové kategorie</label>
        <input
          className="border p-1 rounded"
          type="text"
          value={category}
          onChange={(e) => {
            setCategory(e.target.value);
          }}
        />
      </div>
      {APIResponse?.message && (
        <div className="flex justify-center">
          <span
            className={`border p-2 rounded ${
              APIResponse.type === "success" ? "bg-green-300" : "bg-red-300"
            }`}
          >
            {APIResponse.message}
          </span>
        </div>
      )}
      <button type="submit" className="p-2 border rounded">
        Přidat kategorii
      </button>
    </form>
  );
};

export default CategoryForm;
Form for creating product
oh wait, you need to rebuild to get updated data?
@Ray oh wait, you need to rebuild to get updated data?
Giant ChinchillaOP
Yep, pretty much
Ray
if so, please show the code on /api/get-categories
cougarb8
any reason for not using react-hook-form?

or if you dont want to use that, you can use the primitives

https://react.dev/reference/react-dom/hooks/useFormState
@Ray if so, please show the code on `/api/get-categories`
Ray
you might need to make this route dynamic by
export const dynamic = 'force-dynamic'
Giant ChinchillaOP
get-categories
import prisma from "@/prisma/prisma";
import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest) {
  try {
    const categories = await prisma.category.findMany({
      select: {
        id: true,
        name: true,
      },
    });

    return NextResponse.json(categories);
  } catch (err) {
    console.log(err);
    return NextResponse.json("Chyba serveru", { status: 500 });
  }
}
Answer
Ray
GET endpoint is static generated by default
@Ray `GET` endpoint is static generated by default
Giant ChinchillaOP
Ok, i will try that
Ray
you might want to do this on /api/get-possible-parents as well
Ray
to make it become a dynamic route
@cougarb8 any reason for not using react-hook-form? or if you dont want to use that, you can use the primitives https://react.dev/reference/react-dom/hooks/useFormState
Giant ChinchillaOP
Yeah i will probably restructure the form a little bit, im not familiar with those two that much, i just needed to do it fast
@cougarb8 any reason for not using react-hook-form? or if you dont want to use that, you can use the primitives https://react.dev/reference/react-dom/hooks/useFormState
Giant ChinchillaOP
I mean im familiar with them a bit but i used a custom component in the form where user selects images and i dont know how to connect it to the form
Will look into it later, its not important atm
cougarb8
Did forcing a dynamic route solve ur issue
Giant ChinchillaOP
@cougarb8 Yep that was the issue @Ray thanks ur a legend