S
SolidJS•13mo ago
TutoDS

`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
TutoDS
TutoDSOP•13mo 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
Hayden•13mo ago
well it seems like you are not able to import your getSocial.... function, do you export it and import it properly?
TutoDS
TutoDSOP•13mo 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
Hayden•13mo ago
i remember having some problems like that try to export it independantly yeah

Did you find this page helpful?