javascript - Any idea if its possible, and why, Remix.run makes numerous API calls on the route loader? - Stack Overflow

admin管理员组

文章数量:1345466

I had an issue using Google Maps Places API inside the loader function of my _index.tsx route on my app. The code for the loader function is below.

For relevance, I would point out that I tried to protect the API call by storing the result of the API call, on the Session Cookie, which has a Max-Age of 3600 seconds (1 hour), thus the protection should retrieve the data from the Session Cookie rather than doing another API call. When I tested it seemed to work correctly, but somehow, on Production, it ended up producing thousands of API requests.

From the GPC usage statistics charts, there was a huge amount of calls, in sorts of above 300 per day, even on days where the website had no visits (according to the session charts on Google Analytics), which I find really puzzling.

Has anyone already had such an experience, and can anyone provide some insights on what might be behind this ?

For the moment I removed the calls to GCP APIs but if I'm not able to understand this, I think I won't be able to use Remix.run in production on my projects.

Below the code, you can also see the Google Analytics chart and the GCP Api Calls chart.

export async function loader({
  request,
}: LoaderFunctionArgs): Promise<LoaderData> {
  const session = await getSession(request.headers.get('Cookie'));

  let gdpr = null;
  let place = null;
  let message = null;
  let error = null;

  if(session.has("gdpr")){
    gdpr = session.get("gdpr");
  }

  if(session.has("place")){
    place = JSON.parse(session.get("place") as string);
  }else{
    const options = {
      method:'GET',
      headers:{
        'Accept': 'application/json',
        'X-Goog-Api-Key':`${process.env.GOOGLE_PLACES_API_KEY}`,
        'X-Goog-FieldMask':'rating,userRatingCount'
      }
    };

    const res = await fetch('',options);
    place = await res.json();
    session.set("place", JSON.stringify(place));
  }

  if (session.has("message")) {
    message = session.get("message");
  }
  if (session.has("error")) {
    error = session.get("error");
  }
  return json({ message, error, place, gdpr},
    {
      headers: {
        'Set-Cookie': await commitSession(session),
      },
    }
  );
}

Further clarification : Session management handled by this file (sessions.ts) :

// app/sessions.ts
import { createCookieSessionStorage } from "@remix-run/node"; // or cloudflare/deno

import { SessionData, SessionFlashData } from "./types";

const { getSession, commitSession, destroySession } =
  createCookieSessionStorage<SessionData, SessionFlashData>(
    {
      // a Cookie from `createCookie` or the CookieOptions to create one
      cookie: {
        name: "__session",

        // all of these are optional
        // domain: "bolachaamericana.pt",
        // Expires can also be set (although maxAge overrides it when used in combination).
        // Note that this method is NOT recommended as `new Date` creates only one date on each server deployment, not a dynamic date in the future!
        //
        // expires: new Date(Date.now() + 60_000),
        httpOnly: true,
        maxAge: 3600,
        path: "/",
        sameSite: "lax",
        secrets: ["p40d3l0"],
        secure: true,
      },
    }
  );

export { getSession, commitSession, destroySession };

Google Analytics sessions / users chart

Google Cloud Platform API calls chart

本文标签：