storybook/docs/snippets/vue/apollo-wrapper-component.with-mock-implementation-3.js.mdx
2021-11-09 01:41:54 +00:00

41 lines
1.0 KiB
Plaintext

```html
<!-- ApolloWrapperClient.vue -->
<template>
<div><slot /></div>
</template>
<script>
import { defineComponent, provide } from 'vue';
import { DefaultApolloClient } from '@vue/apollo-composable';
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core';
// Apollo client wrapper component that can be used within your app and Storybook
export default defineComponent({
name: 'WrapperComponent',
setup() {
const httpLink = createHttpLink({
// You should use an absolute URL here
uri: 'https://your-graphql-endpoint',
});
const cache = new InMemoryCache();
const mockedClient = new ApolloClient({
link: httpLink,
cache,
defaultOptions: {
watchQuery: {
fetchPolicy: 'no-cache',
errorPolicy: 'all',
},
query: {
fetchPolicy: 'no-cache',
errorPolicy: 'all',
},
},
});
provide(DefaultApolloClient, mockedClient);
},
});
</script>
```