`createAsync` crashing my app

Hi everyone. When I add this second createAsync my app crashes:

const contactsAndSocial = createAsync(() => getSocialNetworksAndContacts());

const contactsAndSocial = createAsync(() => getSocialNetworksAndContacts());

__vite_ssr_import_7__.getSocialNetworksAndContacts is not a function

Code:

// getSocialNetworksAndContacts
const getSocialNetworksAndContacts = cache(
  async (): Promise<SocialNetworksAndContacts> => {
    'use server';

    try {
      return client.fetch<SocialNetworksAndContacts>(getSocialNetworksAndContactsQuery);
    } catch {
      return {
        social: [],
        contacts: [],
      };
    }
  },
  'social-networks-and-contacts',
);

// getSocialNetworksAndContactsQuery
const getSocialNetworksAndContactsQuery = `
  *[_type == "settings"] [0] {
    "contacts": coalesce(contacts, []),
    "social": coalesce(social, [])
  }
`;

// getSocialNetworksAndContacts
const getSocialNetworksAndContacts = cache(
  async (): Promise<SocialNetworksAndContacts> => {
    'use server';

    try {
      return client.fetch<SocialNetworksAndContacts>(getSocialNetworksAndContactsQuery);
    } catch {
      return {
        social: [],
        contacts: [],
      };
    }
  },
  'social-networks-and-contacts',
);

// getSocialNetworksAndContactsQuery
const getSocialNetworksAndContactsQuery = `
  *[_type == "settings"] [0] {
    "contacts": coalesce(contacts, []),
    "social": coalesce(social, [])
  }
`;

4 Replies

Daniel Sousa @TutoDSOP•3mo ago

My router:

function ContactsRouter() {
  const data = createAsync(() => getContacts());
  const contactsAndSocial = createAsync(() => getSocialNetworksAndContacts());

  return (
    <main>
      <header class="py-16">
        <div class="container flex flex-col items-center justify-center gap-2 text-center">
          <h1 class="font-bold">{data()?.title ?? 'Contactos'}</h1>

          <Show when={data()?.headline} keyed={true}>
            {(headline) => <p class="text-lg">{headline}</p>}
          </Show>
        </div>
      </header>

      <section class="py-8 md:py-12">
        <div class="container grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-[0.5fr_1fr]">
          <section>
            <h2>-</h2>
          </section>

          <section>
            <Show when={data()?.form?.title} keyed={true}>
              {(title) => (
                <h2
                  class={cn([
                    'mb-1 font-semibold',
                    { 'mb-6': !data()?.form?.headline },
                  ])}
                >
                  {title}
                </h2>
              )}
            </Show>

            <Show when={data()?.form?.headline} keyed={true}>
              {(headline) => <p class={'mb-6'}>{headline}</p>}
            </Show>
            <ContactForm />
          </section>
        </div>
      </section>
    </main>
  );
}

function ContactsRouter() {
  const data = createAsync(() => getContacts());
  const contactsAndSocial = createAsync(() => getSocialNetworksAndContacts());

  return (
    <main>
      <header class="py-16">
        <div class="container flex flex-col items-center justify-center gap-2 text-center">
          <h1 class="font-bold">{data()?.title ?? 'Contactos'}</h1>

          <Show when={data()?.headline} keyed={true}>
            {(headline) => <p class="text-lg">{headline}</p>}
          </Show>
        </div>
      </header>

      <section class="py-8 md:py-12">
        <div class="container grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-[0.5fr_1fr]">
          <section>
            <h2>-</h2>
          </section>

          <section>
            <Show when={data()?.form?.title} keyed={true}>
              {(title) => (
                <h2
                  class={cn([
                    'mb-1 font-semibold',
                    { 'mb-6': !data()?.form?.headline },
                  ])}
                >
                  {title}
                </h2>
              )}
            </Show>

            <Show when={data()?.form?.headline} keyed={true}>
              {(headline) => <p class={'mb-6'}>{headline}</p>}
            </Show>
            <ContactForm />
          </section>
        </div>
      </section>
    </main>
  );
}

Any idea? Sorry for insist, any idea what I'm doing wrong

Hayden•3mo ago

well it seems like you are not able to import your getSocial.... function, do you export it and import it properly?

Daniel Sousa @TutoDSOP•3mo ago

I think I found the problem this morning, but not sure So client from sanity is beining exported on ~/cms/index.ts and imported on the query but after that (on the service), the client and the query are both imported from ~/cms and on the route I import the service from the ~/cms So I think I need to remove the exports from ~/cms/index.ts and use it as independent

Hayden•3mo ago

i remember having some problems like that try to export it independantly yeah

Gaming

Programming

`createAsync` crashing my app