How to use mock API data with your Story
We have a fuxt-backend based server that is only used to generate mock data. That data is then exported into a JSON file that is in fuxt at /stories/mock-api.json

I encourage you to open the file in your browser and see how the data is shaped. If you look at it in Firefox’s DevTools network tab, it’s easier to browse.

The server that hosts the image files and is used to generate the JSON file is here:

This means the mock-api.json file is the same data that comes out of WP-GQL and we can update it in the future as we need new data.

I have a Gist of the GQL file that I will keep updated as we add more mock structures to it.

At the moment, the mock-api.json file that ships with fuxt includes the below items.

  • featured - Mocks a homepage slideshow. So sub-pages with images, Vimeo videos and credits. Can also be used to mock a work grid.
  • directors - Mocks a directors roster, so just a list of names with featured images (some have MP4 videos)
  • home - Mocks a home page, so just some text and a featured image with MP4
  • menu - Mocks a Main Menu, shaped ready for wp-menu
  • images - Just an array of media images, some with MP4s. The data is shaped ready for the wp-image component.
  • svgs - Just an array of source URL’s to SVGs

Access mock-api.json in your story

Below is an example of how to use the Mock API data in your story.

import BlockWork from "~/components/block/work"
import { data as API } from "~/stories/mock-api.json"

export default {
    title: "Project name / BlockWork",
}

export const Default = () => ({
    components: { BlockWork },
    data() {
        return {
            API, // This loads the mock API into the template for use below
        }
    },
    template: `<block-work :image="API.images.nodes[0]"/>`,
})