I'm currently trying to learn the integration of Django Rest Framework and React.js, the former for the backend and the latter for the frontend, by building a simple to-do application.
views.py
from rest_framework import viewsets
from . import models
from .serializers import ToDoSerializer, ToDoContainerSerializer
class ToDoContainerViewSet(viewsets.ModelViewSet):
queryset = models.ToDoContainer.objects.all().order_by('created')
serializer_class = ToDoContainerSerializer
serializers.py
from rest_framework.serializers import HyperlinkedModelSerializer
from . import models as todo_model
from rest_framework.serializers import ReadOnlyField
class ToDoContainerSerializer(HyperlinkedModelSerializer):
created_by = ReadOnlyField(source='created_by.id')
class Meta:
model = todo_model.ToDoContainer
fields = (
'url', 'id',
'created_by',
'todos_name',
'todos_important',
'todos_items_count',
)
extra_kwargs = {
'url': {
'view_name': 'todos:todocontainer-detail',
},
}
models.py
from django.db import models
from core.models import TimeStampedModel
from django.core.validators import MinValueValidator, MaxValueValidator
class ToDoContainer(TimeStampedModel):
created_by = models.ForeignKey(
user_model.User, on_delete=models.CASCADE, related_name="todo_container")
todos_name = models.CharField(max_length=50)
todos_important = models.BooleanField(default=False)
def todos_items_count(self):
todo_items = len(self.todo.all())
return int(todo_items)
def __str__(self):
return str(self.todos_name)
I built the views, serializers, models like above, and it seemed api generated properly like the below.
And I tried to get the json of the above to frontend by using the axios module like the below.
import React from 'react';
import axios from 'axios';
import ToDoCard from './ToDoCard';
class ToDoLists extends React.Component {
state = {
isLoading: true,
toDos: []
};
getToDos = async () => {
const { results } = await axios.get("/backend/todos-api/todo_container.json");
console.log(results) //Errors here, 'results' is undefined
this.setState({ toDos: results, isLoading: false })
}
componentDidMount() {
this.getToDos();
}
render() {
const { isLoading, toDos } = this.state;
return (<section className="container">
{isLoading ? (
<div className="loader">
<span className="loader__text">Loading...</span>
</div>
) : (
<div className="toDos">
{
toDos.map(toDo => {
return <ToDoCard
key={toDo.id}
id={toDo.id}
todos_name={toDo.todos_name}
todos_important={toDo.todos_important}
/>
})
}
</div>
)
}
</section>)
}
}
export default ToDoLists;
But the 'results' from 'axios.get("/backend/todos-api/todo_container.json");' was undefined, despite backend seemed fine like the below.
django result
[04/Jan/2021 20:38:07] "GET /backend/todos-api/todo_container.json HTTP/1.1" 200 372
I also set settings like the below and tried 'axios.get("/backend/todos-api/todo_container/");' but the result was the same. 'results' was undefined, and backend seemed fine.
settings.py
REST_FRAMEWORK = {
'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
'PAGE_SIZE': 10,
'DEFAULT_RENDERER_CLASSES': (
'rest_framework.renderers.JSONRenderer',
'rest_framework.renderers.BrowsableAPIRenderer'
),
'DEFAULT_PARSER_CLASSES': (
'rest_framework.parsers.JSONParser',
'rest_framework.parsers.FormParser',
'rest_framework.parsers.MultiPartParser'
)
}
CORS_ORIGIN_WHITELIST = (
'https://localhost:3000',
'https://127.0.0.1:3000',
)
django result
[04/Jan/2021 20:32:13] "GET /backend/todos-api/todo_container/ HTTP/1.1" 200 364
What should I do to fix this?
