To control what happens to requests in Mock Service Worker, you need to intercept them first. Write your first request handler and learn how to intercept a server-side request our application makes in Remix's loader
. And mocking a response? Using a Fetch API Response
instance, of course!
Where can I find the JSON string for the data?
Hi. You can find all the materials, including the JSON I used for mock data, on GitHub: https://github.com/kettanaito/movie-app. Checkout the "completed" branch to switch to the final state of the application, which will include the JSON you're looking for.
Let me know if you have any other questions!
Here's the movies list if anybody is wondering:
const movies = [
{
id: '8061539f-f0d6-4187-843f-a25aadf948eb',
slug: 'the-shawshank-redemption',
title: 'The Shawshank Redemption',
category: 'Drama',
releasedAt: new Date('1994-10-14'),
description:
'Over the course of several years, two convicts form a friendship, seeking consolation and, eventually, redemption through basic compassion.',
imageUrl:
'https://m.media-amazon.com/images/M/MV5BNDE3ODcxYzMtY2YzZC00NmNlLWJiNDMtZDViZWM2MzIxZDYwXkEyXkFqcGdeQXVyNjAwNDUxODI@._V1_FMjpg_UX1200_.jpg',
},
{
id: '3342a4f2-144b-4cef-8041-676affedfbb8',
slug: 'the-godfather',
title: 'The Godfather',
category: 'Drama',
releasedAt: new Date('1972-03-24'),
description:
'Don Vito Corleone, head of a mafia family, decides to hand over his empire to his youngest son Michael. However, his decision unintentionally puts the lives of his loved ones in grave danger.',
imageUrl:
'https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_FMjpg_UY1982_.jpg',
reviews,
},
{
id: 'b2b7e2d9-8b2e-4b7a-9b8a-7f9a0d7f7e0e',
title: 'The Dark Knight',
slug: 'the-dark-knight',
category: 'Action',
releasedAt: new Date('2008-07-18'),
description:
'When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, Batman must accept one of the greatest psychological and physical tests of his ability to fight injustice.',
imageUrl:
'https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_FMjpg_UY2048_.jpg',
},
]
Note: Remove the reviews
key so it works properly.