How to fetch server side the right way?

// server/utils/contentful-client.ts
import { GraphQLClient } from "graphql-request";

export const getContentfulClient = () => {
  const config = useRuntimeConfig();

  return new GraphQLClient(
    `https://graphql.contentful.com/content/v1/spaces/${config.contentful.spaceId}`,
    {
      headers: {
        Authorization: `Bearer ${config.contentful.token}`,
      },
    },
  );
};


// server/api/sectors.ts
import { getSdk } from "~~/shared/types/contentful.generated";
import { getContentfulClient } from "../utils/contentful-client";

export default defineEventHandler(async (event) => {
  const client = getContentfulClient();
  const query = getQuery(event);

  if (!query.locale) {
    throw Error("Request needs locale param");
  }

  const locale = getContentfulLocale(String(query.locale));

  if (!locale) {
    throw new Error("Error getting locale with param");
  }

  const res = await client.request<SectorsQuery>(
    SectorsDocument,
    {
      locale,
    },
  );


  if (!res) {
    throw createError({
      statusCode: 404,
      statusMessage: "Article not found",
    });
  }

  return res;
});

// app/pages/index.vue
const { locale } = useI18n();
const { data } = useFetch<SectorsQuery>('/api/sectors', {
  query: {
    locale: locale.value,
  },
});