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 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.

Here are the things we offer:

Services (we help you)

  • Custom Software Development
    Whether you're looking to create a proof-of-concept or build an entire new capability, we can help you get there at speed and with high quality.
  • Apollo GraphQL Consulting
    We can help in all areas related to Apollo GraphQL and surrounding technologies including Apollo Federation, One-graph unification, Domain Driven Design, µService deployment, automated testing, security, performance, and more.
  • Continuous Delivery Coaching
    We have made it our business to help organizations modernize their technologies stacks and processes to gain speed, stability, and quality improvements, especially in enterprises where legacy systems seem impossible to deal with.

Products (you help yourself)

  • XSpecs
    XSpecs is a full-team collaborative toolset that simplifies the writing of specifications and integrates them into your team's existing workflow. This helps you improves velocity, decreases bugs, and increases quality.
  • Quality Faster
    A complete full-team, full-cycle and full-stack guide to help you and your team increase the speed at which you deliver software while simultaneously increasing quality.

Have something else in mind? Get in touch.


  • Testing with DynamoDB Toolbox

  • Creating Tables with DynamoDB Toolbox

  • Instantly update your Lambda functions (development)