Super slow _server function

My server functions are taking 22 seconds + when I'm running my app in production.

10 Replies

Well this is certainly weird. I'm not too sure why it would work this way... But the following code makes the whole server take FOREVER to run. This code is being imported from an external library.

/client.ts
import { getRequestEvent } from "solid-js/web";

export function getStorefrontClient() {
  const event = getRequestEvent();
  if (!event?.locals.storefront) return null;
  return event?.locals!.storefront as ReturnType<
    typeof createStorefrontClient<StorefrontQueries, StorefrontMutations>
  >;
}

export const storefront = {
  query: async <const Query extends string>(
    query: Query,
    variables?: _createStorefrontClient.OperationVariables<
      StorefrontQueries,
      Query
    >
  ) => {
    "use server";
    const client = getStorefrontClient();
    if (!client) throw new Error("Storefront client not found!");
    return client.query<Query>(query, { variables });
  },
  mutate: async <const Mutation extends string>(
    mutation: Mutation,
    variables: _createStorefrontClient.OperationVariables<
      StorefrontMutations,
      Mutation
    >
  ) => {
    "use server";
    const client = getStorefrontClient();
    if (!client) throw new Error("Storefront client not found!");
    return client.mutate<Mutation>(mutation, { variables });
  },
};

// query.ts
export const createQueryCache = <Query extends string>(query: Query) => {
  return cache(
    async (
      query: Query,
      variables?: createStorefrontClient.OperationVariables<
        StorefrontQueries,
        Query
      >
    ) => {
      return storefront.query<Query>(query, variables);
    },
    getOperationName(query)
  );
};

/client.ts
import { getRequestEvent } from "solid-js/web";

export function getStorefrontClient() {
  const event = getRequestEvent();
  if (!event?.locals.storefront) return null;
  return event?.locals!.storefront as ReturnType<
    typeof createStorefrontClient<StorefrontQueries, StorefrontMutations>
  >;
}

export const storefront = {
  query: async <const Query extends string>(
    query: Query,
    variables?: _createStorefrontClient.OperationVariables<
      StorefrontQueries,
      Query
    >
  ) => {
    "use server";
    const client = getStorefrontClient();
    if (!client) throw new Error("Storefront client not found!");
    return client.query<Query>(query, { variables });
  },
  mutate: async <const Mutation extends string>(
    mutation: Mutation,
    variables: _createStorefrontClient.OperationVariables<
      StorefrontMutations,
      Mutation
    >
  ) => {
    "use server";
    const client = getStorefrontClient();
    if (!client) throw new Error("Storefront client not found!");
    return client.mutate<Mutation>(mutation, { variables });
  },
};

// query.ts
export const createQueryCache = <Query extends string>(query: Query) => {
  return cache(
    async (
      query: Query,
      variables?: createStorefrontClient.OperationVariables<
        StorefrontQueries,
        Query
      >
    ) => {
      return storefront.query<Query>(query, variables);
    },
    getOperationName(query)
  );
};

This is what I'm doing within the actual app:

/routes/index.tsx
import { storefront } from "@solidifront/start/storefront";
import { shopQuery } from "~/graphql/storefront/queries";
import { createAsync } from "@solidjs/router";

export const route = {
  async preload() {
    await storefront.query(shopQuery);
  },
};

export default function Home() {
  const shopData = createAsync(() => storefront.query(shopQuery));

  return (
    <main>
      <h1>Hello {shopData()?.data?.shop.name}</h1>
    </main>
  );
}

/routes/index.tsx
import { storefront } from "@solidifront/start/storefront";
import { shopQuery } from "~/graphql/storefront/queries";
import { createAsync } from "@solidjs/router";

export const route = {
  async preload() {
    await storefront.query(shopQuery);
  },
};

export default function Home() {
  const shopData = createAsync(() => storefront.query(shopQuery));

  return (
    <main>
      <h1>Hello {shopData()?.data?.shop.name}</h1>
    </main>
  );
}

This works perfectly fine in dev btw. Yeah... I'm stuck on this one... I've moved things around, tried changing things here and there and still can't figure this one out. Not sure why, but the issue has nothing to do with the above code... You see I have a middleware that needs to use the process.env and when I build and start the server locally with the added prefixed env's causes the server functions to be significantly slower. I don't know why this would slow it down, anyone have any ideas?

Madaxen86•2mo ago

Where do you host this and how did you configure app.config? And in production you mean deployed to a server or service or also the production build on localhost?

Kooki KodesOP•2mo ago

Hey @Madaxen86 , I'm just now seeing this, this was just running on a NodeJs server locally. But it was running the fully built app.

Madaxen86•2mo ago

Did you verify that in production built that the env variables are available? I think I stumbled over something that envs were available in DEV but not in PROD and I had to install dotenv.

Kooki KodesOP•2mo ago

Yeah, I have code that throws an error if it doesn't exist, I also console logged the value before attempting to use it and it was logged.

Madaxen86•2mo ago

Did you try to remove the solidifront stuff and test again?

Kooki KodesOP•2mo ago

I haven't, but I haven't had problems with it previously. As in the package it used to use import.meta.env for all of the environment variables. But realized that there are some that needed to remain private and not exposed to the client. Hence I use process.env for private variables. I can't see why accessing process.env from a middleware function would break server functions.

Kooki KodesOP•2mo ago

I moved to using a sort of codegen that auto injects the variable on build.

GitHub

solidifront/packages/start/src/config/plugins/solidifrontMiddleware...

A Hydrogen like app, but for the "Solid Start" meta framework. - KookiKodes/solidifront

Kooki KodesOP•2mo ago

That writes to a virtual vite file which is then injected in my create middleware file.

GitHub

solidifront/packages/start/src/middleware/index.ts at main · KookiK...

A Hydrogen like app, but for the "Solid Start" meta framework. - KookiKodes/solidifront

Madaxen86•2mo ago

Tough to say. Maybe you can debug line by line to narrow down what exactly takes that long. I remember that last week somebody also had an issue and I think it was due to some code in his server entry file. Unfortunately I can’t find the post.

Gaming

Programming

Super slow _server function