I am trying to fetch api from meal db website, it says the error failed to fetch API in the console

Please find my recipeslice.js code. I am making recipe website using react-redux technology. I am facing issue in fetching api from the website of "https://www.themealdb.com/api.php"

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

export const fetchRecipes = createAsyncThunk(
  'recipes/fetchRecipes',
  async () => {
    fetch('https://www.themealdb.com/api/json/v1/1/list.php?c=list')
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error(error));
  }
);

const recipesSlice = createSlice({
  name: 'recipes',
  initialState: {
    recipes: [],
    status: 'idle',
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchRecipes.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchRecipes.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.recipes = action.payload;
      })
      .addCase(fetchRecipes.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default recipesSlice.reducer;

Please help me to fetch api data from "https://www.themealdb.com/api.php" as I am making recipe website in react-redux technology.

I tried to add code in recipeslice.js file but the error in console is failed to fetch data.

I tried to add code in recipeslice.js file but the error in console is failed to fetch data and some more errors are this: bundle.js:327 GET https://www.themealdb.com/api/json/v1/1/list.php?c=list net::ERR_INSUFFICIENT_RESOURCES.

Issue

The endpoint "https://www.themealdb.com/api/json/v1/1/list.php?c=list" returns the following JSON data response^*:

{
  "meals": [
    {
      "strCategory": "Beef"
    },
    {
      "strCategory": "Breakfast"
    },
    {
      "strCategory": "Chicken"
    },
    {
      "strCategory": "Dessert"
    },
    {
      "strCategory": "Goat"
    },
    {
      "strCategory": "Lamb"
    },
    {
      "strCategory": "Miscellaneous"
    },
    {
      "strCategory": "Pasta"
    },
    {
      "strCategory": "Pork"
    },
    {
      "strCategory": "Seafood"
    },
    {
      "strCategory": "Side"
    },
    {
      "strCategory": "Starter"
    },
    {
      "strCategory": "Vegan"
    },
    {
      "strCategory": "Vegetarian"
    }
  ]
}

^*I have no idea if this data is correct. I can only verify/validate it is the data that was requested.

The issue I see with your fetchRecipes thunk is that it doesn't return anything.

export const fetchRecipes = createAsyncThunk(
'recipes/fetchRecipes',
async () => {
// This fetch Promise isn't returned
fetch('https://www.themealdb.com/api/json/v1/1/list.php?c=list')
.then(response => response.json())
// console.log returns undefined
.then(data => console.log(data))
.catch(error => console.error(error));
}
);

Suggested Solution

• Return a value from the Thunk.
• Don't mix async/await with Promise chains, use one or the other.
• Don't forget to also return any thrown (and caught) errors for the fetchRecipes.rejected case. See Handling Thunk Errors for more details.

Using Promise chain

export const fetchRecipes = createAsyncThunk(
'recipes/fetchRecipes',
(_, thunkAPI) => {
// Return Promise
return fetch('https://www.themealdb.com/api/json/v1/1/list.php?c=list')
.then(response => response.json())
.then(data => {
// log independently
console.log(data);
// return data from Promise chain
return data;
})
.catch(error => {
console.error(error);
return thunkAPI.rejectWithValue(error);
);
}
);

Using async/await/try/catch

export const fetchRecipes = createAsyncThunk(
'recipes/fetchRecipes',
async (_, thunkAPI) => {
try {
const response = await fetch(
'https://www.themealdb.com/api/json/v1/1/list.php?c=list'
);
const data = await response.json();
console.log(data);
return data;
} catch(error) {
console.error(error);
return thunkAPI.rejectWithValue(error);
}
}
);