`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 @TutoDS
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
Hayden4mo ago
well it seems like you are not able to import your getSocial.... function, do you export it and import it properly?
Daniel Sousa @TutoDS
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
Hayden4mo ago
i remember having some problems like that try to export it independantly yeah
Want results from more Discord servers?
Add your server