Nuxt•3w ago

Page appearing empty when navigating (but not directly)

On my website, https://nuxt.whitecoastrailway.com, clicking on News and Jobs in the navigation return pages with no actual content, only the header and footer (which itself is covered by the header). Using useAsyncData just errors with Cannot stringify a function, and the documentation for the sanity module says that useSanityQuery wraps useAsyncData, so there would seemingly be no point in this anyway. I'm using Sanity with the official module as my CMS to display news posts and job listings, and almost the same code is used is used on each index page. Here's the script in the jobs page: (bit messy but idc)

import type { SanityDocument } from "@sanity/client";
const router = useRouter();

const JOBS_QUERY = groq`*[
  _type == "job"
  && defined(slug.current)
]|order(title, description)[0...12]{_id, title, description, department, open, slug}`;

const { data: jobs } = await useSanityQuery<SanityDocument[]>(JOBS_QUERY);

const results = ref<SanityDocument[] | null>(jobs.value ?? null);
const search = ref(decodeURIComponent(useRoute().query.search as string || ''));

watch(search, () => {
    if (search.value) {
        router.push({ query: { search: search.value } });
    } else {
        router.push({ query: {} });
    }
});

const handleSearch = () => {
    results.value = jobs.value?.filter((job) =>
        Object.values(job).some((value) => value.toString().toLowerCase().includes(search.value.toLowerCase()))
    ) || [];
};

import type { SanityDocument } from "@sanity/client";
const router = useRouter();

const JOBS_QUERY = groq`*[
  _type == "job"
  && defined(slug.current)
]|order(title, description)[0...12]{_id, title, description, department, open, slug}`;

const { data: jobs } = await useSanityQuery<SanityDocument[]>(JOBS_QUERY);

const results = ref<SanityDocument[] | null>(jobs.value ?? null);
const search = ref(decodeURIComponent(useRoute().query.search as string || ''));

watch(search, () => {
    if (search.value) {
        router.push({ query: { search: search.value } });
    } else {
        router.push({ query: {} });
    }
});

const handleSearch = () => {
    results.value = jobs.value?.filter((job) =>
        Object.values(job).some((value) => value.toString().toLowerCase().includes(search.value.toLowerCase()))
    ) || [];
};

3 Replies

kapa.ai•3w ago

Hi @Dog. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the knowledge sources available, I can offer some insights and suggestions regarding the issue you're experiencing with empty pages when navigating on your Nuxt website. The problem you're describing seems to be related to data fetching and rendering. In Nuxt 3, data fetching is typically handled using composables like useAsyncData or useFetch. However, since you're using the Sanity module with useSanityQuery, which wraps useAsyncData, we need to focus on that. Here are a few points to consider: 1. Suspense and Navigation: Nuxt uses Vue's <Suspense> component under the hood to prevent navigation before async data is available. This might be causing the issue you're seeing. As mentioned in the Nuxt documentation, you can add the <NuxtLoadingIndicator> component to show a progress bar between page navigations. 2. Error Handling: The error you're getting with useAsyncData ("Cannot stringify a function") suggests that there might be an issue with the data being returned or how it's being processed. Make sure that the data you're working with doesn't include any functions that can't be serialized. 3. Server vs. Client Rendering: Ensure that your data fetching is set up to work correctly on both the server and client side. The Nuxt documentation mentions that if you haven't fetched data on the server (e.g., with server: false), the data won't be fetched until hydration completes on the client side. 4. Debugging: To help diagnose the issue, you could try adding some console logs or use the Vue devtools to see what's happening during the navigation process. Check if the data is being fetched correctly and if there are any errors occurring during the process. 5. Alternative Approach: If the issue persists, you might want to consider using useLazyAsyncData or setting the lazy: true option with useAsyncData. This will allow the route to load before the data has been fetched, potentially improving the user experience. You can then implement a loading state to show while the data is being fetched. Here's an example of how you might modify your code to use useLazyAsyncData:

const { data: jobs, pending } = useLazyAsyncData('jobs', () => 
  $fetch('/api/jobs') // Replace with your actual API endpoint
)

// Show a loading state while data is being fetched
const loading = ref(true)
watch(pending, (newPending) => {
  loading.value = newPending
})

const { data: jobs, pending } = useLazyAsyncData('jobs', () => 
  $fetch('/api/jobs') // Replace with your actual API endpoint
)

// Show a loading state while data is being fetched
const loading = ref(true)
watch(pending, (newPending) => {
  loading.value = newPending
})

Remember to handle the loading state in your template:

<template>
  <div v-if="loading">Loading...</div>
  <div v-else>
    <!-- Your job listings here -->
  </div>
</template>

<template>
  <div v-if="loading">Loading...</div>
  <div v-else>
    <!-- Your job listings here -->
  </div>
</template>

If these suggestions don't resolve the issue, it might be helpful to check the Sanity module documentation for any specific requirements or known issues related to data fetching and navigation in Nuxt 3. Nuxt Documentation on Data Fetching ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@634054240557596672> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

DogOP•3w ago

need actual help not whatever generic crap that is why does it always try to write as much as physically possible so you spend like 5 years reading it all LLMs are garbage

Gaming

Programming

Page appearing empty when navigating (but not directly)

Did you find this page helpful?