#nextjs storyblok help

1 messages · Page 1 of 1 (latest)

glossy mauveBOT
#

Hi @rain comet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To optimize your Storyblok data fetching in Next.js and avoid fetching all data unnecessarily, you can use Storyblok's query parameters to filter stories directly on the API side. This approach is more efficient than fetching all stories and filtering them client-side. Here's how you can modify your function to achieve this:

async function fetchArticlesByCategory(categorySlug: string) {
  try {
    const storyblokApi = getStoryblokApi();
    const response = await storyblokApi.get("cdn/stories", {
      starts_with: "blog/",
      excluding_slugs: "*/",
      filter_query: {
        category: {
          in: categorySlug
        }
      },
      resolve_relations: ["Article.category"],
    });

    const articles = response.data.stories;
    console.log(`Articles in category "${categorySlug}":`, articles);
    return articles;
  } catch (error) {
    console.error("Error fetching articles:", error);
    throw error;
  }
}

In this optimized version:

  1. We use the filter_query parameter to filter stories by category directly on the Storyblok API side.
  2. The in operator is used to match the categorySlug with the category field of the stories.
  3. We've removed the client-side filtering, as it's no longer necessary.

This approach will fetch only the articles that match the specified category, reducing the amount of data transferred and improving performance.

Remember to adjust the field names (category in this case) to match your actual Storyblok content structure.

For more information on Storyblok's API parameters and filtering options, you can refer to the Storyblok API documentation (https://www.storyblok.com/docs/api/content-delivery/v2).

#

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

rain comet
#

@glossy mauve not working

glossy mauveBOT
#

Let me check the knowledge base for you again. Give me one moment! :books:

#

I apologize that the previous suggestion didn't work for you. To provide a more helpful response, could you please give me more details about what specifically isn't working? Are you encountering any error messages, or is the function not returning the expected results?

Without more context about your specific Storyblok setup and the exact issue you're facing, it's difficult to pinpoint the problem. The knowledge sources provided don't contain enough information about your particular Storyblok implementation or the specific error you're encountering.

If you can provide more information about:

  1. The exact error message or unexpected behavior you're seeing
  2. Your Storyblok content structure
  3. Any changes you've made to the code

I'll be better equipped to assist you with your Next.js and Storyblok integration. Remember, I'm specifically tuned to help with Next.js-related questions, so please keep your follow-up focused on the Next.js aspects of your implementation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

rain comet
#

@glossy mauve i got empty array

glossy mauveBOT
#

Let me check the knowledge base for you again. Give me one moment! :books:

#

I understand you're getting an empty array as a result. This could be happening for a few reasons when working with Next.js and Storyblok. Let's try to troubleshoot this issue:

  1. Check your category slug:
    Make sure the categorySlug you're passing to the function exactly matches the slug in Storyblok. Slugs are case-sensitive.

  2. Verify your content structure:
    Ensure that your Storyblok content model for articles includes a 'category' field and that it's correctly populated for your articles.

  3. Check the API response:
    Add some logging to see what the API is returning. You can modify your function like this:

async function fetchArticlesByCategory(categorySlug: string) {
  try {
    const storyblokApi = getStoryblokApi();
    const response = await storyblokApi.get("cdn/stories", {
      starts_with: "blog/",
      excluding_slugs: "*/",
      filter_query: {
        category: {
          in: categorySlug
        }
      },
      resolve_relations: ["Article.category"],
    });

    console.log('Storyblok API response:', response.data);
    const articles = response.data.stories;
    console.log(`Articles in category "${categorySlug}":`, articles);
    return articles;
  } catch (error) {
    console.error("Error fetching articles:", error);
    throw error;
  }
}

This will help you see what data Storyblok is actually returning.

  1. Check your Storyblok API key:
    Ensure you're using the correct API key and that it has the necessary permissions to access your content.

  2. Verify the starts_with parameter:
    Make sure your blog posts are actually located at "blog/" in your Storyblok space.

If you're still getting an empty array after checking these points, it might be helpful to try fetching all stories without any filtering first, just to ensure you can retrieve data from Storyblok:

# 
const response = await storyblokApi.get("cdn/stories", {
  version: 'published' // or 'draft' if you're in preview mode
});

This will help determine if the issue is with the filtering or with the API connection itself.

Remember, when working with Next.js and external APIs like Storyblok, it's important to handle potential API errors and empty states in your components Next.js Data Fetching (https://nextjs.org/docs/pages/building-your-application/data-fetching).

If you're still encountering issues after trying these suggestions, please provide more details about your Storyblok content structure and any error messages you might be seeing in the console.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: