I am facing an issue where I am trying to retrieve data of a single product from "api/products/id" using Django Rest Framework and store it in the Redux state. However, when I refresh the product's page in my React application by going to "localhost:3000/products/1", instead of getting the product with id = 1, I receive undefined data.
Upon further investigation, I discovered that the problem seems to originate from views.py.
Could this problem be related to migrations? I tried deleting database *.pyc + *.py files except init, running makemigrations and migrate again, but the issue persists.
How can I go about solving this?
Browser's console: https://i.stack.imgur.com/LxUBK.png
VS Code terminal https://i.stack.imgur.com/KnrPU.png
EDIT - added front-end
If the issue lies with the front-end, it might be due to fetching problems. The request URL appears correct without any misspellings.
In fetchSingleProduct, only part of the URL is included, while the rest is set in package.json as follows: "proxy": "http://127.0.0.1:8000"
singleProductSlice
const initialState = {
status: 'idle',
error: null,
product: {
reviews: [],
}
}
// Slice logic here...
export default singleProductSlice.reducer
export const selectSingleProduct = state => state.product
ProductScreen.js
// Component code here...App.js
<Routes>
<Route path='/' element={<HomeScreen />} exact />
<Route path='/products/:id' element={<ProductScreen />} />
</Routes>
views.py
@api_view(['GET'])
def getProduct(request, pk):
# Issue at hand...
serializer.py
class ProductSerializer(serializers.ModelSerializer):
# Serializing logic...
models.py
# Model definition...urls.py
urlpatterns = [
path('', views.getRoutes, name='routes'),
path('products/', views.getProducts, name='products'),
path('products/<int:pk>', views.getProduct, name='product'),
]
The original path was "<str:pk>", which resulted in a ValueError, so it was changed to "<int:pk>".