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 a perfect fit, but when you try running it you get this beauty:
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>
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({});
Take a look at a working example here:
xolvio
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 Xolvio 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.
Add types to your AWS lambda handler
Lambdas handlers can be invoked with many different, but always complex, event arguments. Add to that the context, callback, matching return type and you basically start listing all the different ways that your function can fail in production.
How to expose a local service to the internet
From time to time you might need to expose your locally running service to the external world - for example you might want to test a webhook that calls your service. To speed up the test/development feedback loop it would be great to be able to point that webhook to your local machine.
For loops in JavaScript (vs _.times)
From time to time I still see a for loop in JavaScript codebases. Linters are frequently angry about them. Let's see how we can replace them.