🤔 How do you structure 𝗠𝗼𝗰𝗸 𝗗𝗮𝘁𝗮 in your #React or #NextJS projects? Where do you store it? Today I noticed that spreading mock data across the app and pulling it out piece by piece doesn’t feel right. Instead, I’m moving it into one central place. Next step: adding a simple switch to toggle between mock data and real data when needed. What do you think? How do you handle mock data in your projects? #CleanCodeSolutions #Frontend #Backend #JavaScript #WebDevelopment
I think this will make your app always hardcoded to mockUsers though. You probably need to rethink this logic // real users implementation export const apiUsersService: UsersService = { getUsers: () => fetchUsers(), } // mock users implementation export const mockUsersService: UsersService = { getUsers: async () => mockUsers, } // users.provider.ts export const usersService = process.env.NEXT/REACT_PUBLIC_USE_MOCKS === 'true' ? mockUsersService : apiUsersService
I personally would make it dependent on a .env variable and inside my .env.develop file I would set it to true. Or alternatively I would set it inside a special dev-mock script to run the app in a mock state
Mock service worker still #1! https://mswjs.io/
For sure not a condition in run time For past couple years i use mock service worker MSW which its catch API calls in network layer in service worker and before that I've been using moxios
MSW, mock service worker....
MSW for sure! Great to develop if the api isn't ready and you can use the handlers in automated tests too.
I am using the JSON-Server - https://www.npmjs.com/package/json-server. You need to run the app with proxy to localhost, without any adjustments in the src code.