amplify dynamodb graphql fetch function is running infinite in loop

Question

I am trying to fetch records from dynamodb using graphql (AWS amplify reacjs setup). I have created a component CTCards and using this in App.js

The problem that we are facing is function fetchTodos is running in infinite loop though in Database there is only two records and I am getting exactly 2 records but this function is running in infinite loop

When I comment the fetching code then the program runs as expected

//== CTCards ( component which is giving issue)  ===

function CTCards(props) {
    const [todo, setTodos] = useState([]);
    
    useEffect(() => {
        fetchTodos();
    }, []);
    
    const fetchTodos = async () => {
        try {
// == this-block ===
            const todoData = await API.graphql(graphqlOperation(listTodos));
            const todoList = todoData.data.listTodos.items;
            console.log('To Do List', todoList);
            setTodos(todoList);
// == /this-block ===
        } catch (error) {
            console.log('error on fetching to do list', error);
        }
    };

    return (
        <div style={{color: "red"}}>
       
            {todo.map((todo, index) => {
                <div style={{color: "red"}}>
                 <div>{todo.name}</div>
                 <div>{todo.description}</div>
            </div>            
            })} 
        </div>
    )
}

//== App.js code ===

function App() {
    return (
        <div>
            <CTCards/>          
        </div>
    );
}

Please find the complete code base here github.com/smaranneducations/react-amplified/blob/test/src/… — Smarann Educations
– Smarann Educations, Commented Mar 31, 2021 at 5:19

user3339197 · Accepted Answer · 2021-03-31 05:15:09Z

1

The setTodos is remounting the component so the useEffect body runs again.

If you comment out the setTodos it should run normally.

You can use React.memo to compare props and not the virtual dom but it will still do a useless fetch. Consider restructuring your application so the fetch happens one layer above.

answered Mar 31, 2021 at 5:15

user3339197

Sign up to request clarification or add additional context in comments.

Comments

Sjnao · Accepted Answer · 2021-03-31 05:22:56Z

1

As @arti91 said it s cause you are updating the state and doing so react rerenders the component and runs the useEffect hook again. A possible solution to this could be to check inside the hook if you already fetched the data.

useEffect(() => {
   if (!todos) {
       fetchTodos();
   }
}, []);

answered Mar 31, 2021 at 5:22

Sjnao

1361 silver badge5 bronze badges

2 Comments

Smarann Educations Over a year ago

If I add this condition then fetchTodos() will not be called as todos is empty in beginning and as fetchTodos() will not be called status will not change so output will be blank

Sjnao Over a year ago

I m not sure I understand that correctly. Are you saying that the "if check" is not correct and fetchTodos() is not called when "todos" is empty? in that case try with: if (todo.length === 0) { fetchTodos() }

Dharman · Accepted Answer · 2021-03-31 09:30:20Z

0

Instead of this code:

 try {
       // == this-block ===
        const todoData = await API.graphql(graphqlOperation(listTodos));
        const todoList = todoData.data.listTodos.items;
        console.log('To Do List', todoList);
        setTodos(todoList);
       // == /this-block ===
    } catch (error) {
        console.log('error on fetching to do list', error);
    }

Try this code:

try {
       const todoData = API.graphql({ query: queries.listTodos }).then(response => {
        setTodos(response.data.listTodos.items);
      }).catch(err => {
        console.log(err);
      });
    } catch (err) {
        console.log('error facing Todos:', err)
    }

This issue occurs because the of the Promise that is still is prebuild phase so if we give it some time that it could complete the cycle and get the value to store it.

edited Mar 31, 2021 at 9:30

Dharman♦

34k27 gold badges106 silver badges157 bronze badges

answered Mar 31, 2021 at 9:24

Partha S. Kundu

1

3 Comments

xadm Over a year ago

await equals to .then - just newer syntax

Smarann Educations Over a year ago

Added a return under map and it worked which I was missing {todo.map((todo, index) => { return ( <div key={todo.id ? todo.id : index}> <div className="lname">{todo.name}</div> <div className="ldesc">{todo.description}</div> </div> ) })} but why do we need a return for map as it is equal to loop

xadm Over a year ago

you can use => ({ syntax instead of => {return (

Collectives™ on Stack Overflow

amplify dynamodb graphql fetch function is running infinite in loop

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related