Narcissistic, Perfectly Modest

    @alexlit/vue-apollo-kit

    3.6.0 • Public • Published

    Vue Apollo Kit

    Sample nuxt.js plugin (TypeScript + Apollo REST link)

    import {
      ApolloClient,
      ApolloLink,
      buildAxiosFetch,
      InMemoryCache,
      onError,
      RestLink,
      VueApollo,
    } from '@alexlit/vue-apollo-kit';
    import { formDataBodySerializer } from '@alexlit/vue-apollo-kit/body-serializers';
    import type { Plugin } from '@nuxt/types';
    import Vue from 'vue';
    
    const API_HOST = 'https://example.com';
    
    Vue.use(VueApollo);
    
    /**
     * @param context
     * @param context.app
     * @param context.$axios
     */
    const vueApollo: Plugin = ({ app, $axios }) => {
      /**
       * Error
       */
      const errorLink = onError(({ graphQLErrors, networkError }) => {
        if (graphQLErrors) {
          // silent
        }
    
        if (
          networkError &&
          `${networkError}` !== 'TypeError: forward is not a function'
        ) {
          const { response, statusCode, result } = networkError as any;
    
          console.error(
            '[Apollo.plugin::onError.networkError]: ',
            `${networkError}`,
            {
              response,
              statusCode,
              result,
            },
          );
        }
      });
    
      /**
       * Cache
       */
      const cache = new InMemoryCache();
    
      /**
       * Rest
       */
      const restLink = new RestLink({
        uri: API_HOST,
    
        /**
         * Use axios plugin instead of vanilla fetch
         *
         * @param uri
         * @param options
         */
        customFetch: (uri, options) => {
          return buildAxiosFetch($axios, (config) => {
            /**
             * Apollo formed header, for example, when using the 'bodySerializers' parameter
             */
            const apolloHeaders: Record<string, string> = Object.fromEntries(
              (options.headers as any).entries(),
            );
    
            config.headers = { ...config.headers, ...apolloHeaders };
    
            return config;
          })(uri, options);
        },
    
        bodySerializers: {
          formData: formDataBodySerializer,
        },
      });
    
      /**
       * Client
       */
      const defaultClient = new ApolloClient({
        link: ApolloLink.from([errorLink, restLink]),
        typeDefs: [],
        resolvers: {},
        cache,
      });
    
      /**
       * Provider
       */
      const apolloProvider = new VueApollo({
        defaultClient,
      });
    
      app.apolloProvider = apolloProvider;
    };
    
    export default vueApollo;

    Keywords

    Install

    npm i @alexlit/vue-apollo-kit

    DownloadsWeekly Downloads

    5

    Version

    3.6.0

    License

    MIT

    Unpacked Size

    10.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • alex-lit