gatsby-node.js file throws an error after uploading to Gatsby Azure Static Web App

Question

After uploading my adjusted gatsby-node.js file to Azure Static Web App I receive the following error:

error "gatsby-node.js" threw an error while running the createPages lifecycle:
Request failed with status code 500
Error:Request failed with status code 500

If I run the same definition in "gatsby develop" mode on my local machine everything works fine...

Here is my gatsby-node.js file:

const axios = require('axios');
const urls = [
`https://abc.azurestaticapps.net/data-api/rest/recipe`,
`https://abc.azurestaticapps.net/data-api/rest/recipekat`
]
const get = axios.all(urls.map((url) => axios.get(url)));

async function getRecipeData(){
  const data = await get;
  return data
}

exports.createPages = async({actions: {createPage}}) => {

  const Data = await getRecipeData();
  const allRecipes = Data[0].data.value; 
  const allRecipesKat = Data[1].data.value;
  
  createPage({
    path: `/recipes/`,
    component: require.resolve('./src/templates/RecipesComp.js'),
    context: { allRecipes }
  });

  createPage({
    path: `/erstellen/`,
    component: require.resolve('./src/templates/RecipesKatComp.js'),
    context: { allRecipesKat }
  });

}

After checking different websites I found no solution for this issue.

Answer 1

While trying with your code, I encountered an error fetching recipe data. Please check if the URL https://abc.azurestaticapps.net/data-api/rest/recipe is accessible and if any authentication or permission configurations are required to access it.

• I changed the code to the following sample example that fetches data from the backend and renders it in the browser, allowing users to view a list of recipes and their ingredients using the Gatsby development server:

Note: If you are using a backend as an API, convert it into an Azure Function App (code).

src/components/RecipeList.js:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const RecipeList = () => {
  const [recipes, setRecipes] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('/data-api/rest/recipe');
        //const response = await axios.get('http://localhost:5000/data-api/rest/recipekat');
        //const response = await axios.get(https://certificate122ravi455.azurewebsites.net/data-api/rest/recipekat');
        setRecipes(response.data.value);
      } catch (error) {
        console.error('Error fetching recipes:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h2>Recipes</h2>
      <ul>
        {recipes.map(recipe => (
          <li key={recipe.id}>
            <strong>{recipe.name}</strong>
            <ul>
              {recipe.ingredients.map(ingredient => (
                <li key={ingredient}>{ingredient}</li>
              ))}
            </ul>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default RecipeList;

/src/pages/recipes.js:

import React from 'react';
import RecipeList from '../components/RecipeList';

const RecipesPage = () => {
  return (
    <div>
      <h1>My Recipes</h1>
      <RecipeList />
    </div>
  );
};

export default RecipesPage;

I followed the configuration of Azure Static Web Apps. staticwebapp.config.json

{
  "navigationFallback": {
    "rewrite": "index.html"
  }
}

Sample data from the backend in the URL:

git action status:

Static Web App Output: