Next.js Discord

Discord Forum

JSX does not update after revalidate tag

Answered
Trigg Hound posted this in #help-forum
Open in Discord
Trigg HoundOP
As the title implies. After a successful revalidation from my front-end component my JSX doesn't re-render the updated data(but if I log the data it will log the new updated data). 

export const SystemStatus = async ({ siteId }: { siteId: string }) => {
  const token = getToken();

  if (!token) return <Redirect href="/login" />;
  
  // GRAPHQL Wrapper that uses fetch under the hood
  const response = await query(
    QuerySideNavStatusSensors,
    {
      authorization: token,
      next: { revalidate: 60, tags: [`${SENSOR_METADATA}:${siteId}`] },
    },
    { siteId },
  );

  console.log(JSON.stringify(response, null, 2));

  if (typeof response === "string") {
    console.log(response);
    return null;
  }

  const data = response.sensorBySiteId!.filter(isNotNull);

  const enabled = data.filter((sensor) => sensor.enabled).length;

  console.log("ENABLED", enabled, data.length);

  const timezone = data[0]!.siteFk!.timeZoneFk!.name;
  const now = dayjs().utc().tz(timezone).subtract(24, "hours");

  const heartbeats =
    data.length === 0
      ? 0
      : data
          .map((sensor) =>
            sensor.isMissing
              ? { ...sensor, good: false }
              : !sensor.lastHeartBeat
                ? { ...sensor, good: false }
                : {
                    ...sensor,
                    good: isNaN(
                      getTime({ time: sensor.lastHeartBeat, timezone }).diff(
                        now,
                       "hours",
                      ),
                    ),
                  },
          )
          .reduce<number>((acc, cur) => (cur.good ? acc + 1 : acc), 0);

  console.log("HEARTBEATS", heartbeats, data.length);

  const lowestBatteryLife = data.reduce((acc, cur) => {
    const lowest = parseFloat(cur.batteryEstimation ?? "0");

    return lowest < acc ? lowest : acc;
  }, 100);

  console.log("LOWEST BATTERY", lowestBatteryLife);

  return // jsx
Answered by Trigg Hound
update it was my router.back() function call inside of my mutation that was causing the issue
View full answer

3 Replies

Trigg HoundOP
This is the @tanstack/react-query mutation

  const { mutate, isPending } = useMutation({
    mutationFn: updateSensors,
    async onSuccess(errors) {
      if (errors.length > 0) {
        const message = `Failed to update sensors: ${errors.join(", ")}`;
        return void toast(message.slice(0, message.length - 2), {
          duration: 10000,
        });
      }

      const response = await mutation<Revalidate>("/api/revalidate", {
        method: "POST",
        body: { tag: `${SENSOR_METADATA}:${siteId}` },
      });

      toast(
        response.success
          ? "Successfully updated sensors"
          : "Failed to revalidate sensors refresh the page to get the most up to date information",
      );

      if (response.success) router.refresh();

      form.reset(form.getValues());

      // using this because it is a route interceptor modal
      return void router.back();
    },
  });
JSX from the first code block
return (
    <div className="grid grid-rows-[auto,1fr] gap-1">
      <SystemState token={token} uri={env.WS_URL} />
      <div className="grid grid-cols-2 grid-rows-2 gap-1">
        <Link
          href={`/${siteId}/utility/sensor-monitor`}
          className={cn(
            "flex h-9 w-full items-center justify-between rounded-md px-2 text-primary",
            sensorColor,
          )}
        >
          <Radio className="h-6 w-6 shrink-0 text-primary" />
          <div className="flex flex-col items-end justify-end text-xs leading-tight text-primary">
            <span className="flex flex-col items-end justify-end text-xs leading-tight text-primary">
              {enabled} / {data.length}
            </span>
            <span>sensors</span>
          </div>
        </Link>
        <Link
          href={`/${siteId}/utility/heartbeat-monitor`}
          className={cn(
            "flex h-9 w-full items-center justify-between rounded-md px-1 text-primary",
            heartbeats === data.length
              ? "bg-green-400 hover:bg-green-400/90"
              : heartbeats / data.length > 0.3
                ? "bg-yellow-600 hover:bg-yellow-600/90"
                : "bg-destructive hover:bg-destructive/90",
          )}
        >
          <Activity className="h-5 w-5 shrink-0 text-primary" />
          <div className="flex flex-col items-end justify-end text-xs leading-tight text-primary">
            <span>
              {heartbeats} / {data.length}
            </span>
            <span>heartbeats</span>
          </div>
        </Link>
        <Link href={`/${siteId}/utility/battery-levels`}>
            <BatteryFull className="h-5 w-5 shrink-0 text-primary" />
          <div className="flex flex-col items-end justify-end text-xs leading-tight text-primary">
            <span>{`${lowestBatteryLife.toFixed(2)}%`}</span>
            <span>battery</span>
          </div>
        </Link>
      </div>
    </div>
  );
Trigg HoundOP
update it was my router.back() function call inside of my mutation that was causing the issue
Answer