Apollo Composable with Vue Storybook Stories

When you first add Apollo to your Vue app using composition API you probably end up with code similar to this one:

const apolloClient = new ApolloClient({
  uri: 'https://example.com/graphql'
})

const app = new Vue({
  setup() {
    provide(DefaultApolloClient, apolloClient);
  },
  render: h => h(App)
})

One day you might decide your app became so large that it would be great to develop smaller chunks of it in isolation, storybook seems perfect fit, but when you try running it you get this beauty:

Apollo Client with id default not found

This happens because your app configuration is ignored by storybook.

Let's create a wrapper that will provide the Apollo Client for our story:

<template>
  <div><slot/></div>
</template>

<script>

import {defineComponent, provide} from "@vue/composition-api";
import {DefaultApolloClient} from "@vue/apollo-composable";
import ApolloClient from "apollo-boost";

const apolloClient = new ApolloClient({
  uri: 'http://localhost:4000/graphql'
})

export default defineComponent({
  setup() {
    provide(DefaultApolloClient, apolloClient);
  }}
)

</script>

ApolloWrapper.vue

Now you can make a story that looks like this:

import Page from "./Page";
import ApolloWrapper from "./ApolloWrapper";

export default {
  title: 'Example/Page',
  component: Page,
};

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { ApolloWrapper, Page },
  template: '<ApolloWrapper><Page /></ApolloWrapper>',
});

export const Primary = Template.bind({});
Page.stories.js

Take a look at a working example here:

xolvio/apollo-composable-with-vue-stories-demo
Apollo Composable with Vue Storybook Stories example - xolvio/apollo-composable-with-vue-stories-demo

Let me know if you have any questions or thoughts in the comments below.


Let us help you on your journey to Quality Faster

We at Xolv.io specialize in helping our clients get more for less. We can get you to the holy grail of continuous deployment where every commit can go to production — and yes, even for large enterprises.

Feel free to schedule a call or send us a message below to see how we can help.

User icon
Envelope icon

or

Schedule a 30m call
  • Better way to use useReducer with TypeScript

    Introducing useComplexState hook, - a small wrapper combining Redux Toolkit, useReducer with some extra syntax sugar to make things even simpler and more to-the-point.

  • Dealing with randomness in tests

    A few patterns to help you deal with randomness in your codebase.

  • How to deal with the yarn link "There's already a package called x registered" error

    Short discussion about helpful error messages, and a solution to the problem