CD
Cloudflare Developers•10mo ago
James

Yes we implemented support for the fetch

Yes we implemented support for the fetch cache a long time ago. Please send code snippets of what you're doing
4 Replies
Befus
Befus•10mo ago
Context: it works locally but not in production. I have a locations page and a create locations page, when creating a new location I would like it to update the locations page showing the newly added location. Without having to use useStates. I want the flow to be like this: Visit locations page -> locations get cached -> create new location -> new location gets revalidated in the cache -> user is redirect to locations page and is shown all locations including newly added location. Location page: 
const Locations: FunctionComponent = async () => {
  const incomingLocations: Location[] = await fetch(
    `${process.env.NEXT_PUBLIC_HOST}/api/locations`, {
      next: {
        tags: ["locations"],
      }
    }
  ).then((response) => response.json());

  return <LocationPage incomingLocations={incomingLocations} />;
};
const Locations: FunctionComponent = async () => {
  const incomingLocations: Location[] = await fetch(
    `${process.env.NEXT_PUBLIC_HOST}/api/locations`, {
      next: {
        tags: ["locations"],
      }
    }
  ).then((response) => response.json());

  return <LocationPage incomingLocations={incomingLocations} />;
};
Create location: 
const handleSubmit = async (values: z.infer<typeof locationUploadSchema>) => {
    // Validate using zod
    const validatedForm = locationUploadSchema.safeParse(values) as {
      success: boolean;
      data: z.infer<typeof locationUploadSchema>;
      error: z.ZodError<any>;
    };
    if (validatedForm.data.image) {
      const upload = await handleUploadFile(validatedForm.data.image);
    }

    // User server action to create a new location
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_HOST}/api/locations`,
      {
        method: "POST",
        body: JSON.stringify(validatedForm.data),
      }
    ).then((response) => response.json());

    toast({
      title: response.message,
      description: response.description,
      action: response.success ? (
        <ToastAction
          altText="undo"
          onClick={() => deleteLocation(response.data as Location)}
        >
          Undo
        </ToastAction>
      ) : (
        <ToastAction altText="Try again" onClick={() => handleSubmit(values)}>
          Try again
        </ToastAction>
      ),
      variant: response.success ? "default" : "destructive",
    });

    router.push("/locations");
  };
const handleSubmit = async (values: z.infer<typeof locationUploadSchema>) => {
    // Validate using zod
    const validatedForm = locationUploadSchema.safeParse(values) as {
      success: boolean;
      data: z.infer<typeof locationUploadSchema>;
      error: z.ZodError<any>;
    };
    if (validatedForm.data.image) {
      const upload = await handleUploadFile(validatedForm.data.image);
    }

    // User server action to create a new location
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_HOST}/api/locations`,
      {
        method: "POST",
        body: JSON.stringify(validatedForm.data),
      }
    ).then((response) => response.json());

    toast({
      title: response.message,
      description: response.description,
      action: response.success ? (
        <ToastAction
          altText="undo"
          onClick={() => deleteLocation(response.data as Location)}
        >
          Undo
        </ToastAction>
      ) : (
        <ToastAction altText="Try again" onClick={() => handleSubmit(values)}>
          Try again
        </ToastAction>
      ),
      variant: response.success ? "default" : "destructive",
    });

    router.push("/locations");
  };
Api for locations 
export async function GET() {
  const response = await getRequest("LOCATIONS");

  const incomingLocations: Location[] = await response.json();

  return new Response(JSON.stringify(incomingLocations), {
    headers: { "Content-Type": "application/json" },
  });
}

export async function POST(request: Request) {
  let location = (await request.json()) as Location;

  try {
    // Send request to KV to create location
    const id = uuidv4();

    // Upload image to Cloudflare images
    console.log("location");
    console.log(location);

    // Cleanup data by removing empty objects or arrays or strings
    location = removeEmptyData(location);

    // add image id to location
    // location.imageId = upload;

    // add id to object
    location.id = id;

    await putRequest("LOCATIONS", "id:" + id, location);

    // Return success message
    return new Response(
      JSON.stringify({
        message: "Location created",
        description: `"${location.name}" has been created successfully`,
        success: true,
        data: location,
      }),
      {
        headers: { "Content-Type": "application/json" },
      }
    );
  } catch (error) {
    return new Response(
      JSON.stringify({
        message: "Error creating location",
        description: `"${location.name}" could not be created`,
        success: false,
      }),
      {
        headers: { "Content-Type": "application/json" },
      }
    );
  } finally {
    // Revalidate cache
    revalidatePath("/locations");
  }
}
export async function GET() {
  const response = await getRequest("LOCATIONS");

  const incomingLocations: Location[] = await response.json();

  return new Response(JSON.stringify(incomingLocations), {
    headers: { "Content-Type": "application/json" },
  });
}

export async function POST(request: Request) {
  let location = (await request.json()) as Location;

  try {
    // Send request to KV to create location
    const id = uuidv4();

    // Upload image to Cloudflare images
    console.log("location");
    console.log(location);

    // Cleanup data by removing empty objects or arrays or strings
    location = removeEmptyData(location);

    // add image id to location
    // location.imageId = upload;

    // add id to object
    location.id = id;

    await putRequest("LOCATIONS", "id:" + id, location);

    // Return success message
    return new Response(
      JSON.stringify({
        message: "Location created",
        description: `"${location.name}" has been created successfully`,
        success: true,
        data: location,
      }),
      {
        headers: { "Content-Type": "application/json" },
      }
    );
  } catch (error) {
    return new Response(
      JSON.stringify({
        message: "Error creating location",
        description: `"${location.name}" could not be created`,
        success: false,
      }),
      {
        headers: { "Content-Type": "application/json" },
      }
    );
  } finally {
    // Revalidate cache
    revalidatePath("/locations");
  }
}
James
JamesOP•10mo ago
which bit is the part that's supposed to be cached?
Befus
Befus•10mo ago
I seem to have resolved the issue, when I found this in the next-on-pages docs it became clear to me that I had to add a domain and the KV
Befus
Befus•10mo ago
Want results from more Discord servers?
Add your server