Lars. Comments - Answer Overflow

Lars.

•Created by high_on_js on 9/6/2024 in #❓・help

Server side pages without server directory for api calls

From a .vue page I use this api from a method in a pinia store and it runs server side:

export default defineEventHandler(async (event) => {
  const { auServername, auDatabase, auUsername, auPassword } =
    useRuntimeConfig();

  if (!auServername || !auDatabase || !auUsername || !auPassword) {
    console.error(
      "/api/getToken: FileMaker environment variables are not set."
    );
    throw createError({
      statusCode: 500,
      message: "FileMaker environment variables are not set.",
    });
  }
  const url = `https://${auServername}/fmi/data/v1/databases/${auDatabase}/sessions`;

  async function fetchData(fetchFn) {
    try {
      const response = await unsecureFetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Basic ${btoa(`${auUsername}:${auPassword}`)}`,
        },
        timeout: 5000,
      });

      if (process.server) {
        console.log("Running server side"); // 'Running server side'
      }
      if (process.client) {
        console.log("Running client side");
      }

      return {
        status: "success",
        code: 200,
        message: "Data fetched successfully",
        data: response,
      };
    } 
  }
...

export default defineEventHandler(async (event) => {
  const { auServername, auDatabase, auUsername, auPassword } =
    useRuntimeConfig();

  if (!auServername || !auDatabase || !auUsername || !auPassword) {
    console.error(
      "/api/getToken: FileMaker environment variables are not set."
    );
    throw createError({
      statusCode: 500,
      message: "FileMaker environment variables are not set.",
    });
  }
  const url = `https://${auServername}/fmi/data/v1/databases/${auDatabase}/sessions`;

  async function fetchData(fetchFn) {
    try {
      const response = await unsecureFetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Basic ${btoa(`${auUsername}:${auPassword}`)}`,
        },
        timeout: 5000,
      });

      if (process.server) {
        console.log("Running server side"); // 'Running server side'
      }
      if (process.client) {
        console.log("Running client side");
      }

      return {
        status: "success",
        code: 200,
        message: "Data fetched successfully",
        data: response,
      };
    } 
  }
...

I'm using unsecureFetch (based on ofetch) because $fetch uses a default Agent that can't be overridden to ignore a certificate. However, this isn't the core issue here but it shows that Pinia methods can run server side. The problem seems to lie in how useAsyncData is being used. Hope this helps a bit.

9 replies

NNuxt

•Created by Mosayyeb on 9/5/2024 in #❓・help

Private API to fetch data from server on page load or navigation without exposing api to the client

Using useAsyncData with server: true, the data fetching will only happen during the initial page load on the server. When the user navigates away from the page and then returns, the data will not be re-fetched from the server. That seems expected behavior of Nuxt. I think you have to wrap () => $fetch("external api") in an api in ~/server/routes to make it private. API routes are for exposing data to the client, while server routes are useful for internal server-side logic. And then manually trigger a re-fetch of the data using the refresh or execute methods provided by useAsyncData:

<script setup>
const { data, refresh, pending } = await useAsyncData(
  "theKey",
  () => $fetch("/private api that calls external api"),
  { server: true }
);

// ... 

// Trigger a re-fetch when needed (e.g., on a button click or navigation event)
const handleRefresh = () => {
  refresh();
};
</script>

<script setup>
const { data, refresh, pending } = await useAsyncData(
  "theKey",
  () => $fetch("/private api that calls external api"),
  { server: true }
);

// ... 

// Trigger a re-fetch when needed (e.g., on a button click or navigation event)
const handleRefresh = () => {
  refresh();
};
</script>

Let me know what you think because I'm not totally sure.

3 replies

Gaming

Programming