```js // YourPage.stories.js import DocumentScreen from './YourPage.vue'; import WrapperComponent from './ApolloWrapperClient.vue'; import { graphql } from 'msw'; export default { /* πŸ‘‡ The title prop is optional. * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'DocumentScreen', component: DocumentScreen, }; //πŸ‘‡The mocked data that will be used in the story const TestData = { user: { userID: 1, name: 'Someone', }, document: { id: 1, userID: 1, title: 'Something', brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', status: 'approved', }, subdocuments: [ { id: 1, userID: 1, title: 'Something', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', status: 'approved', }, { id: 2, userID: 1, title: 'Something else', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', status: 'awaiting review', }, { id: 3, userID: 2, title: 'Another document', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', status: 'approved', }, { id: 4, userID: 2, title: 'Something', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', status: 'approved', }, ], }; const PageTemplate = () => ({ components: { DocumentScreen, WrapperComponent }, template: ` `, }); export const MockedSuccess = PageTemplate.bind({}); MockedSuccess.parameters = { msw: [ graphql.query('AllInfoQuery', (req, res, ctx) => { return res(ctx.data(TestData)); }), ], }; export const MockedError = PageTemplate.bind({}); MockedError.parameters = { msw: [ graphql.query('AllInfoQuery', (req, res, ctx) => { return res( ctx.delay(800), ctx.errors([ { message: 'Access denied', }, ]) ); }), ], }; ```