akryum/vue-cli-plugin-apollo

🚀 @vue/cli plugin for Vue Apollo

vue-cli-plugin-apollo

🚀 Start building a Vue app with Apollo and GraphQL in 2 minutes!

This is a vue-cli 3.x plugin to add Apollo and GraphQL in your Vue project.

Documentation

Sponsors

⭐ Features

• Automatically integrate vue-apollo into your Vue app
• Embed Apollo client config (upgradable and customizable)
  • Websockets
  • File uploads
  • Client state with apollo-link-state
• Included optional Graphql Server (upgradable and customizable):
  • Dead simple GraphQL API sources generated into your project (with import/export support)
  • Upgradable service running apollo-server
  • Websocket subscriptions support
  • Optional automatic mocking
  • Apollo Engine support
  • GraphQL playground integrated in the CLI UI
  • Configuration screen in the CLI UI
  • Server-Side Rendering with @akryum/vue-cli-plugin-ssr
• Included optional example component with:
  • Watched query
  • Mutation
  • Realtime subscription using Websockets
  • Fully working image gallery with image upload
• GraphQL validation using ESLint

vue-cli-plugin-apollo's Issues

Breaking in mjs enabled webpack 4 environments

This is effectively break https://github.com/nuxt-community/apollo-module with latest nuxt-edge, because nuxt-edge have an mjs enabled
nuxt/nuxt#3892
nuxt-modules/apollo#159
It ends up with invalid code in browser

 function(e, t, n) {
    "use strict";
    (function(e) {
        t.a = function(e, t) {
            return e instanceof t
        }
    }
    ).call(this, require("./../../process/browser.js"))

Updating graphql to 14.0.2 make the error go away with mjs enabled.

Install errors

[dev] [mav@goodrobots-maverick ~/code/maverick-web]$ npm i -D vue-cli-plugin-apollo

> [email protected] postinstall /srv/maverick/code/maverick-web/node_modules/nodemon
> node -e "console.log('\u001b[32mLove nodemon? You can now support the project via the open collective:\u001b[22m\u001b[39m\n > \u001b[96m\u001b[1mhttps://opencollective.com/nodemon/donate\u001b[0m\n')" || exit 0

Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of @vue/cli-shared-utils@^3.0.0-alpha.12 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] - 0.12 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of graphql@^0.10.0 || ^0.11.0 || ^0.12.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of aws-lambda@^0.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of graphql@^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of graphql@^0.10.0 || ^0.11.0 || ^0.12.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of graphql@^0.10.0 || ^0.11.0 || ^0.12.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of graphql@^0.10.0 || ^0.11.0 || ^0.12.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ [email protected]
added 427 packages in 21.166s
[dev] [mav@goodrobots-maverick ~/code/maverick-web]$ vue invoke apollo
 ERROR  Error: Cannot find module '@vue/cli-shared-utils'
Error: Cannot find module '@vue/cli-shared-utils'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/srv/maverick/code/maverick-web/node_modules/vue-cli-plugin-apollo/generator/index.js:4:5)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)

Can you make question for empty project

Now you creating many files with data. Can you create question in vue cli for empty files?

using apollo-client config as dependency for NuxtJS apollo-module

@Akryum in this PR (nuxt-modules/apollo#106) we try to generalize the integration with vue-apollo similar to your approach in the vue-cli-plugin-apollo. One question though - will it be save to call the plugin within this package as follow:

import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client'

This would generalize the same behaviour for vue-apollo users either using NuxtJs or the vue-cli

Thanks!

Can not pass custom options to ApolloServer constructor

In vue.config.js I try to pass options to ApolloServer constructor as specified at https://github.com/Akryum/vue-cli-plugin-apollo#plugin-options

module.exports = {
  pluginOptions: {
    apollo: {
      enableMocks: true,
      enableEngine: true,
      serverOptions: {
        mockEntireSchema: false,
        playground: {
          settings: {
            "editor.cursorShape": "line"
          }
        }
      }
    }
  }
};

And

module.exports = {
  pluginOptions: {
    apollo: {
      enableMocks: true,
      enableEngine: true,
      apolloServer: {
        mockEntireSchema: false,
        playground: {
          settings: {
            "editor.cursorShape": "line"
          }
        }
      }
    }
  }
};

also not working.
After some debugging I found out that issue in that line https://github.com/Akryum/vue-cli-plugin-apollo/blob/master/graphql-server/index.js#L129

It should be

apolloServerOptions = merge(apolloServerOptions, defaultValue(options.serverOptions, {}))

as deepmerge creates a new object by default.

[Typings]: Type 'ApolloLink' is not assignable to type 'ApolloLink'. Two different types with this name exist, but they are unrelated.

I'm not sure if this is vue-cli-plugin-apollo problem, but here they are:

ERROR in /home/wildan/Projects/Sensorfied/EDI/edi-ui/src/apollo.ts
7:39 Argument of type '{ link: ApolloLink; cache: InMemoryCache; connectToDevTools: boolean; }' is not assignable to parameter of type
'ApolloClientOptions<NormalizedCacheObject>'.
  Types of property 'link' are incompatible.
    Type 'ApolloLink' is not assignable to type 'ApolloLink'. Two different types with this name exist, but they are unrelated.
      Types of property 'split' are incompatible.
        Type '(test: (op: Operation) => boolean, left: ApolloLink | RequestHandler, right?: ApolloLink | Reques...' is not assignable t
o type '(test: (op: Operation) => boolean, left: ApolloLink | RequestHandler, right?: ApolloLink | Reques...'. Two different types with
 this name exist, but they are unrelated.
          Types of parameters 'test' and 'test' are incompatible.
            Types of parameters 'op' and 'op' are incompatible.
              Type 'Operation' is not assignable to type 'Operation'. Two different types with this name exist, but they are unrelated.
                Types of property 'query' are incompatible.
                  Type 'DocumentNode' is not assignable to type 'DocumentNode'. Two different types with this name exist, but they areunrelated.
                    Types of property 'loc' are incompatible.
                      Type 'Location | undefined' is not assignable to type 'Location | undefined'. Two different types with this nameexist, but they are unrelated.
                        Type 'Location' is not assignable to type 'Location | undefined'.
                          Type 'Location' is not assignable to type 'Location'. Two different types with this name exist, but they areunrelated.
                            Types of property 'startToken' are incompatible.
                              Type 'Token' is not assignable to type 'Token'. Two different types with this name exist, but they are unrelated.
                                Types of property 'prev' are incompatible.
                                  Type 'Token | undefined' is not assignable to type 'Token | null'.
                                    Type 'undefined' is not assignable to type 'Token | null'.
     5 | import VueApollo from 'vue-apollo'
     6 |
  >  7 | const ethingClient = new ApolloClient({
       |                                       ^
     8 |   link: createHttpLink({
     9 |     uri: '/graphql/ething'
    10 |   }),
No lint errors found
Version: typescript 2.8.1, tslint 5.9.1
Time: 675ms

• package.json

  "dependencies": {
    "apollo-cache-inmemory": "^1.1.12",
    "apollo-client": "^2.2.8",
    "apollo-link": "^1.2.2",
    "apollo-link-context": "^1.0.8",
    "apollo-link-http": "^1.5.4",
    "apollo-link-persisted-queries": "^0.2.0",
    "apollo-link-ws": "^1.0.8",
    "apollo-upload-client": "^8.0.0",
    "apollo-utilities": "^1.0.11",
...
    "graphql": "^0.13.2",
...
  }
  "devDependencies": {
    "@types/graphql": "^0.13.0",
...
    "vue-cli-plugin-apollo": "^0.7.4",
...
  }

Upload not working

Prior to updating apollo-modules, a link was manually created there, but after using to vue-cli-plugin-apollo, the download stopped working. But it only worked for me when I manually created the upload link.

import uploadClient from 'apollo-upload-client';
import cacheInMemory from 'apollo-cache-inmemory';

import introspectionQueryResultData from './fragmentTypes.json';

export default ({ env }) => {
	const fragmentMatcher = new cacheInMemory.IntrospectionFragmentMatcher({
		introspectionQueryResultData
	});

	const cache = new cacheInMemory.InMemoryCache({
		fragmentMatcher
	});

	const graphqlUrl = `${env.PUBLIC_URL}/graphql`;

	const link = uploadClient.createUploadLink({
		uri: graphqlUrl
	});

	return {
		httpEndpoint: graphqlUrl,
		cache,
		link
	};
};

I think the problem is that the download link should be created first.

Error: Type "CacheControlScope" was defined more than once.

Running the example, giving an error

vue create hello-world
vue add apollo
? Add example code Yes
? Add a GraphQL API Server? Yes
? Enable automatic mocking? No
? Add Apollo Engine? No
npm run apollo

ERROR  Error: Type "CacheControlScope" was defined more than once.
Error: Type "CacheControlScope" was defined more than once.
    at Object.buildASTSchema (D:\work\example\hello-world\node_modules\graphql\utilities\buildASTSchema.js:116:17)
    at Object.buildSchemaFromTypeDefinitions (D:\work\example\hello-world\node_modules\graphql-tools\dist\generate\buildSchemaFromTypeDefinitions.js:24:28)
    at Object.makeExecutableSchema (D:\work\example\hello-world\node_modules\graphql-tools\dist\makeExecutableSchema.js:27:29)
    at new ApolloServerBase (D:\work\example\hello-world\node_modules\apollo-server-core\dist\ApolloServer.js:106:43)
    at new ApolloServer (D:\work\example\hello-world\node_modules\apollo-server-express\dist\ApolloServer.js:41:1)
    at module.exports (D:\work\example\hello-world\node_modules\vue-cli-plugin-apollo\graphql-server\index.js:132:18)
    at run (D:\work\example\hello-world\node_modules\vue-cli-plugin-apollo\index.js:182:7)
    at api.registerCommand.args (D:\work\example\hello-world\node_modules\vue-cli-plugin-apollo\index.js:194:7)
    at Service.run (D:\work\example\hello-world\node_modules\@vue\cli-service\lib\Service.js:203:12)
    at Object.<anonymous> (D:\work\example\hello-world\node_modules\@vue\cli-service\bin\vue-cli-service.js:22:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] apollo:run: `vue-cli-service apollo:run`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] apollo:run script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\pkl\AppData\Roaming\npm-cache\_logs\2018-09-09T08_17_23_175Z-debug.log

Generated js breaks vuejs linting

ERROR in ./src/apollo.js

  ✘  http://eslint.org/docs/rules/comma-dangle  Unexpected trailing comma  
  src/apollo.js:20:39
      uri: GRAPHQL_ENDPOINT + '/graphql',
                                         ^

  ✘  http://eslint.org/docs/rules/comma-dangle  Unexpected trailing comma  
  src/apollo.js:27:31
        authorization: getAuth(),
                                 ^

Mostly trailing commas, lots of them. This is using the default syntax linting option in vuejs templates.

support apollo-link-error onError

Im using a nuxt-apollo module. In version 3 i was able to use apollo-link-error like this:

const errorLink = onError(({ graphQLErrors, networkError }) => {
    if (networkError) {
      ctx.app.$messages.showErrorMessage(networkError.message)
    }

  })

But v4 now use vue-cli-plugin-apollo and it seem there no option to use apollo-link-error anymore.

nuxt-modules/apollo#115 (comment)

Can I add GraphQL API Server later on?

I just started testing out the plugin (along with vue ui) but I opted to not install the GraphQL API Server and I was wondering if I can add it later on?

No "latest" version published on npm

edit: user error

How to integrate with Vuex

I'm currently trying to fire off a graphQL query from inside Vuex using the apollo plugin. My store.js file looks like this:

import Vue from 'vue';
import Vuex from 'vuex';
import gql from 'graphql-tag';
import { createProvider } from './vue-apollo';

const provider = createProvider();
const { apolloClient } = provider;

Vue.use(Vuex);

export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {
    getPosts: () => {
      apolloClient
        .query({
          query: gql`
            query {
              _id
              title
              imageUrl
            }
          `
        })
          .then(data => console.log(data))
          .catch(err => console.error(err))
    }
  },
});

But I keep on getting erors from chrome developer tools stating that it is unable to read the query property of undefined. I know that I am possibly messing this up royally, but what should I import at the top of this file to make it work?

[feature-request] Allow post-processing generated schema before creating server

Apollo-server allows two ways to create a server:

1. passing in the final schema yourself;

2. passing in typeDefs, resolvers and schemaDirectives, and then apollo-server calls makeExecutableSchema internally to generate the schema and start the sever. (see https://github.com/apollographql/apollo-server/blob/master/packages/apollo-server-core/src/ApolloServer.ts#L151-L200)

Now vue-cli-plugin-apollo only suports the second way (see https://github.com/Akryum/vue-cli-plugin-apollo/blob/master/graphql-server/index.js#L56-L132). But some popular graphql tools need to handle the generated schema manually. For example, the popular graphql-middleware (see https://github.com/prisma/graphql-middleware#standalone-usage):

import { applyMiddleware } from 'graphql-middleware'
import { makeExecutableSchema } from 'graphql-tools'
import { authMiddleware, metricsMiddleware } from './middleware'

const schema = makeExecutableSchema({ typeDefs, resolvers })

const schemaWithMiddleware = applyMiddleware( // POST-PROCESSING SCHEMA HERE
  schema,
  metricsMiddleware,
  authMiddleware,
)

This cannot be done with this plugin now.

I understand that apollo-graphql internally patches the typeDefs before calling makeExecutableSchema (see https://github.com/apollographql/apollo-server/blob/master/packages/apollo-server-core/src/ApolloServer.ts#L151-L200 again), so it's not feasible to simply let user pass in the whole schema.

So here is my suggestion:

Provide another option item in paths here https://github.com/Akryum/vue-cli-plugin-apollo/blob/master/index.js#L185. We can call it schemaPostProcessing or whatever. In user's apollo-server folder there can be schema-post-processing.js file, exporting a function which accepts the internally generated schema (by makeExecutableSchema ) and returns the final schema.

Then before https://github.com/Akryum/vue-cli-plugin-apollo/blob/master/graphql-server/index.js#L132 we do the logic shown here (https://github.com/apollographql/apollo-server/blob/master/packages/apollo-server-core/src/ApolloServer.ts#L151-L200) to assemble the schema, and after calling makeExecutableSchema we call the schemaPostProcessing function provided by user. And then we start apollo server using schema instead of orignial typeDefs, resolvers etc.

(maybe there is better way to achieve this?)

Blank authorization header causing issues with Postgraphile API

Until a token is set, an empty authorization header is being sent:

POST /graphql HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Content-Length: 308
accept: */*
Origin: http://localhost:3000
authorization:

This is causing an issue with Postgraphile, which is expecting a bearer token if the authorization header is present.

Would you accept a PR which doesn't send the authorization header if a token isn't set?

Support for custom InMemoryCache configuration

Thanks for your work with Apollo & Vue.

I'm currently using the @nuxtjs/apollo-module which is migrating to vue-cli-plugin-apollo in v4, which is currently in beta.

Is it possible to pass custom configuration into the InMemoryCache?

This is the configuration I am using with apollo-module v3:

import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { toIdValue } from 'apollo-utilities'

// If a slug exists, use it as the cache key
const dataIdFromObject = result => {
  if (result.slug) return `${result.__typename}:${result.slug}`;
}

// Tell Apollo how to find posts in the cache (by slug)
// Adapted from this Github issue: https://github.com/apollographql/apollo-client/issues/1934
// cacheRedirect documentation: https://www.apollographql.com/docs/react/advanced/caching.html#cacheRedirect
// toIdValue documentation: https://www.apollographql.com/docs/react/features/performance.html#cache-redirects
const cacheRedirects = {
  Query: {
    postBy: (_, { slug }) => toIdValue(dataIdFromObject({ __typename: 'Post', slug })),
    post: (_, { slug }) => toIdValue(dataIdFromObject({ __typename: 'Post', slug }))
  }
}

export default () => ({
  link: new HttpLink({ uri: GRAPHQL_API }),
  cache: new InMemoryCache({ 
    cacheRedirects: cacheRedirects,
    dataIdFromObject: dataIdFromObject,
  }),
  connectToDevTools: true
})

Just came here to wish you good luck bro

You doing great job and i wanted to say thank you. <3

Unexpected token import - ESM in dist files

Hi! Some distribution files contain ES modules: https://unpkg.com/[email protected]/graphql-client/dist/index.js

Is this intended? It breaks Jest since it doesn't transpile node_modules by default.

As a workaround, renaming .babelrc to .babel.config.js and using transformIgnorePatterns in Jest's config make it work again. More details here.

Thanks!

The purpose of apollo.js?

Hello,

I'm an early test this plugin adding it to my typescript project generated by vue/cli 3.0.0-beta.6 .
As I clean up, I found src/apollo.js not imported in anywhere. I wonder what apollo.js function is?

I choose ? Add a GraphQL API Server? No

Just info: src/vue-apollo.js is imported in main.ts as it should be.

Regards.

Redirecting on 401 error

@Akryum Hi! I'd like to catch 401 errors and redirect to /login or fetch another token automatically. I've been searching and looks like it is possible to create an apollo http link to do this, but seems rather complex.

Do you recommend passing link or apollo to createServer in this plugin or know a better way? Perhaps an error handler could be exposed in vue-apollo? Thanks!

'vue-cli-plugin-apollo' should be listed in the project's dependencies

Hello,

I've created a project from scratch using vue-cli and the ts-vue preset. When I try adding the vue-cli-plugin-apollo (through vue-cli UI) I get the following error (after the configuration step) :

⠋  Running completion hooks...
error: 'vue-cli-plugin-apollo' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies) at src/vue-apollo.js:3:1:
  1 | import Vue from 'vue';
  2 | import VueApollo from 'vue-apollo';
> 3 | import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client';
    | ^
  4 |
  5 | // Install the vue plugin
  6 | Vue.use(VueApollo);

Here is the full trace :

{"type":"warning","data":"../package.json: No license field"}
{"type":"warning","data":"\"@vue/cli-plugin-babel > [email protected]\" has unmet peer dependency \"webpack@>=2\"."}
{"type":"warning","data":"\"@vue/cli-plugin-eslint > [email protected]\" has unmet peer dependency \"webpack@>=2.0.0 <5.0.0\"."}
{"type":"warning","data":"\"@vue/cli-plugin-typescript > [email protected]\" has unmet peer dependency \"webpack@^2.3.0 || ^3.0.0 || ^4.0.0\"."}
{"type":"warning","data":"\"@vue/eslint-config-airbnb > [email protected]\" has unmet peer dependency \"eslint@^4.9.0\"."}
{"type":"warning","data":"\"@vue/eslint-config-airbnb > [email protected]\" has unmet peer dependency \"webpack@>=1.11.0\"."}
{"type":"warning","data":"\"@vue/eslint-config-airbnb > [email protected]\" has unmet peer dependency \"[email protected] - 4.x\"."}
{"type":"warning","data":"\"@vue/eslint-config-typescript > [email protected]\" has unmet peer dependency \"typescript@*\"."}
{"type":"warning","data":"\" > [email protected]\" has unmet peer dependency \"webpack@^3.0.0 || ^4.0.0\"."}
{"type":"warning","data":"\"vue-cli-plugin-apollo > [email protected]\" has incorrect peer dependency \"[email protected]\"."}
{"type":"warning","data":"\" > [email protected]\" has unmet peer dependency \"@vue/cli-shared-utils@^3.0.0-beta.11\"."}
{"type":"warning","data":"\" > [email protected]\" has unmet peer dependency \"chalk@^2.3.1\"."}
SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at Socket.child.stdout.on.buffer (/Users/scleriot/.config/yarn/global/node_modules/@vue/cli/lib/util/installDeps.js:117:31)
    at Socket.emit (events.js:182:13)
    at addChunk (_stream_readable.js:279:12)
    at readableAddChunk (_stream_readable.js:264:11)
    at Socket.Readable.push (_stream_readable.js:219:10)
    at Pipe.onread (net.js:636:20)
{"type":"tree","data":{"type":"newAllDependencies","trees":[{"name":"@babel/[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"@types/[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"@types/[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"@types/[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"@types/[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"@types/[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"@types/[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"@types/[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"@types/[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"@types/[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"@types/[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"@types/[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"@types/[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"@types/[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"@types/[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"@types/[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"@types/[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"@types/[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint
":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0},{"name":"[email protected]","children":[],"hint":null,"color":null,"depth":0}]}}

🚀  Invoking generator for vue-cli-plugin-apollo...
⠸  Installing additional dependencies...{"type":"warning","data":"../package.json: No license field"}
⠋  Installing additional dependencies...{"type":"warning","data":"\" > [email protected]\" has unmet peer dependency \"apollo-client@^2.0.0\"."}
{"type":"warning","data":"\"@vue/cli-plugin-babel > [email protected]\" has unmet peer dependency \"webpack@>=2\"."}
{"type":"warning","data":"\"@vue/cli-plugin-eslint > [email protected]\" has unmet peer dependency \"webpack@>=2.0.0 <5.0.0\"."}
⠙  Installing additional dependencies...{"type":"warning","data":"\"@vue/cli-plugin-typescript > [email protected]\" has unmet peer dependency \"webpack@^2.3.0 || ^3.0.0 || ^4.0.0\"."}
⠹  Installing additional dependencies...{"type":"warning","data":"\"@vue/eslint-config-airbnb > [email protected]\" has unmet peer dependency \"eslint@^4.9.0\"."}
{"type":"warning","data":"\"@vue/eslint-config-airbnb > [email protected]\" has unmet peer dependency \"webpack@>=1.11.0\"."}
{"type":"warning","data":"\"@vue/eslint-config-airbnb > [email protected]\" has unmet peer dependency \"[email protected] - 4.x\"."}
{"type":"warning","data":"\"@vue/eslint-config-typescript > [email protected]\" has unmet peer dependency \"typescript@*\"."}
{"type":"warning","data":"\" > [email protected]\" has unmet peer dependency \"graphql@^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0\"."}
{"type":"warning","data":"\" > [email protected]\" has unmet peer dependency \"webpack@^3.0.0 || ^4.0.0\"."}
{"type":"warning","data":"\" > [email protected]\" has unmet peer dependency \"@vue/cli-shared-utils@^3.0.0-beta.11\"."}
{"type":"warning","data":"\" > [email protected]\" has unmet peer dependency \"chalk@^2.3.1\"."}
⠸  Installing additional dependencies...{"type":"warning","data":"\"vue-cli-plugin-apollo > [email protected]\" has incorrect peer dependency \"[email protected]\"."}
📦  Installing additional dependencies...
⠋  Running completion hooks...error: 'vue-cli-plugin-apollo' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies) at src/vue-apollo.js:3:1:
  1 | import Vue from 'vue';
  2 | import VueApollo from 'vue-apollo';
> 3 | import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client';
    | ^
  4 |
  5 | // Install the vue plugin
  6 | Vue.use(VueApollo);

I've tried using vue-cli beta15 and beta16

Integration with data sources

Hi, I'm trying to integrate Apollo Server Data Sources with pushing it into serverOptions like below but I cant get it from the context as documented in apollo graphql documentation so it did not work for me.

Does this require some changes in the package?

Need an ability to set `credentials` on the HttpLink

I'm not using token auth, and instead using cookie session auth. For that one needs to set credentials: 'same-origin' option for HttpLink.

More details: https://www.apollographql.com/docs/react/recipes/authentication.html#Cookie

Right now there is no way to pass these options.

generated apollo.js createApolloClient() should take endpoint argument

The createApolloClient() function in the generated apollo.js should take the endpoint and paths as an argument to the function, rather than global scope constants. This is so multiple clients can be easily created with different endpoints.

eg.

const endpoint = {
 uri: 'http://example.com/graphql',
 queryPath: '/graphql',
 subscriptionsPath: '/subscriptions',
 persistent: false
}
export function createApolloClient ({ ssr, endpoint }) {
...

Can't import the namespace object from non EcmaScript module

Hi @Akryum Thanks for this plugin, I am getting this error on running npm run serve

Support custom terminating links in `createApolloClient`

For context, I'm using @nuxtjs/apollo which makes use of vue-cli-plugin-apollo and createApolloClient for integrating Vue Apollo with Nuxt.

With the way the link option is implemented in this library, it is impossible to use a terminating link. When I try to pass in a custom terminating link, such as apollo-link-batch-http, I receive the following error:

{ Error: You are calling concat on a terminating link, which will have no effect
    at new LinkError (.../node_modules/apollo-link/lib/bundle.umd.js:52:32)
    at concat (.../node_modules/apollo-link/lib/bundle.umd.js:177:26)
    at ApolloLink.concat (.../node_modules/apollo-link/lib/bundle.umd.js:204:20)
    at .../node_modules/apollo-link/lib/bundle.umd.js:152:68
    at Array.reduce (<anonymous>)
    at Function.from (.../node_modules/apollo-link/lib/bundle.umd.js:152:34)
    at defaultClientConfig (server-bundle.js:315:66)
    at module.exports../.nuxt/apollo-module.js.__webpack_exports__.default (server-bundle.js:627:25)
    at createApp (server-bundle.js:1446:193)
    at <anonymous> link: ApolloLink { request: [Function] } }

I've tracked down the issue to createApolloClient, lines 38-47:

    const httpLink = createUploadLink({
      uri: httpEndpoint,
      ...httpLinkOptions,
    })


    if (!link) {
      link = httpLink
    } else {
      link = from([link, httpLink])
    }

You can see that the created upload link is being used even when a custom link is passed in via the link option. The application I work in has no upload forms, so I'd prefer to use apollo-link-batch-http or, in the event I add a upload form, split between apollo-link-batch-http and the upload link, similar to this suggestion:

/**
 * Apollo Terminating link
 * The split will skip Batching if an
 * operation's context contains hasUpload: true.
 */
const httpLink = ApolloLink.split(
  operation => operation.getContext().hasUpload,
  createUploadLink(OPTS),
  new BatchHttpLink(OPTS)
)

/**
 * Then within a mutation component, specify the context
 * with hasUpload to activate the Upload link.
 */
const { data } = await uploadMutation({
  variables: { file },
  context: {
    hasUpload: true, // activate Upload link
  }
})

What can be done to support a custom terminating link to be passed to createApolloClient?

Manual mode seems activated

Hello,

I used the vue plugin to install vue apollo, I currentlu have the following version:

• "vue-apollo": "^3.0.0-beta.21"
• "vue-cli-plugin-apollo": "^0.16.4"

My vue-apollo.js file is the following:

import Vue from 'vue';
import VueApollo from 'vue-apollo';
import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client';

// Install the vue plugin
Vue.use(VueApollo);

// Name of the localStorage item
const AUTH_TOKEN = 'apollo-token';

// Http endpoint
const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || '/graphql/';

// Config
const defaultOptions = {
  httpEndpoint,
  wsEndpoint: null,
  tokenName: AUTH_TOKEN,
  persisting: false,
  websocketsOnly: false,
  ssr: false,
};

// Call this in the Vue app file
export function createProvider(options = {}) {
  // Create apollo client
  const { apolloClient, wsClient } = createApolloClient({
    ...defaultOptions,
    ...options,
  });
  apolloClient.wsClient = wsClient;

  // Create vue apollo provider
  const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
    defaultOptions: {
      $query: {
        // fetchPolicy: 'cache-and-network',
      },
    },
    errorHandler(error) {
      // eslint-disable-next-line no-console
      console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message);
    },
  });

  return apolloProvider;
}

And the main.js is this one:

import Vue from 'vue';
import App from './components/App/App.vue';
import router from './router';
import { createProvider } from './vue-apollo';

Vue.config.productionTip = false;

new Vue({
  router,
  provide: createProvider().provide(),
  render: h => h(App),
}).$mount('#app');

When I try in a component to do a query, it is as if I had the manual mode was activated:

import gql from 'graphql-tag';

const allTodoLists = gql`
  query{
    allTodoLists {
      id
      title
      creator {
        id
        username
      }
      createdAt
    }
  }
`;

export default {
  name: 'todo-list',
  apollo: {
    todoLists: {
      query: allTodoLists,
    },
  },
  data() {
    return {
      todoLists: '',
    };
  },
};

In the console, I get this error: Missing todoLists attribute on result Object { allTodoLists: (1) […], … }.

Am I missing something somewhere ? Thanks in advance for your help !

Issue with Prettier

When issuing yarn run serve with a basic install except I routed to the ApolloExample component I am getting the following error:

 error  in ./src/graphql/MessageAdd.gql

Syntax Error: Unexpected Name "ESLintPluginGraphQLFile" (1:1)
> 1 | ESLintPluginGraphQLFile`#import "./MessageFragment.gql"
    | ^
  2 |
  3 | mutation messageAdd ($input: MessageInput!) {
  4 |   messageAdd (input: $input) {
    at Array.forEach (<anonymous>)


 @ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ApolloExample.vue?vue&type=script&lang=js 66:0-61 86:20-40
 @ ./src/components/ApolloExample.vue?vue&type=script&lang=js
 @ ./src/components/ApolloExample.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

This could be related to this?

I confirmed that the above does not happen when I repeat all steps but select eslint with standard instead of eslint with prettier.

[New feature] Enable/disable subscription

Hi,

It would be great to have the possibility to enable/disable subscription from the config part of the vue-apollo.js. We could have a new property subs with a boolean value (true/false) within options object:

const options = {
  ssr: false,
  **subs: false**,
  base: process.env.VUE_APP_GRAPHQL_ENDPOINT || "http://localhost:3000",
  endpoints: {
    graphql: process.env.VUE_APP_GRAPHQL_PATH || "/graphql",
    subscription: process.env.VUE_APP_GRAPHQL_SUBSCRIPTIONS_PATH || "/subscriptions"
  },
  persisting: false
};

The main goal is to avoid this kind of message from the browser when subscription is not set up on GraphQL server side:

WebSocket connection to 'ws://localhost:3000/subscriptions' failed: Error during WebSocket handshake: Unexpected response code: 400

Thanks a lot!

type error lastIndexOf undefined if not running apollo-server

Hi
I run my server in a different project and with vue ui I see following error message in the console:

TypeError: Cannot read property 'lastIndexOf' of undefined
    at exports.resolveModuleRoot (/Users/d/.nvm/versions/node/v8.11.2/lib/node_modules/@vue/cli/node_modules/@vue/cli-ui/apollo-server/util/resolve-path.js:5:28)

Is there a way to entirely disable the use of apollo-server? I tried apollo:false with no effect so far. Thanks

Installation issue

Hello,

maybe I miss a point, but if I try to install vue-cli-plugin-apollo I get the following error:

$ vue invoke apollo
ERROR SyntaxError: Unexpected token ...
/path/to/project/node_modules/vue-cli-plugin-apollo/generator/index.js:59
...options,
^^^

I'm using the newest version of vue-cli on an empty/fresh project
$ vue -V
3.0.0-beta.6

and followed the instructions of https://github.com/Akryum/vue-cli-plugin-apollo/blob/master/README.md

Not sure if this is a problem of my specific installation or of vue-cli or related stuff.
Thanks in advance.

Best,
Achim

wut? How it suppose to work?

I just executed vue invoke apollo and then typed npm run graphql-api

Error while loading rule 'graphql/template-strings': Must provide .graphqlconfig file or pass in `schemaJson` option with schema object or `schemaJsonFilepath` with absolute path to the json file.

Receiving this error even though I selected to NOT run the graphql API server when I installed the plugin.

Module build failed: Error: Error while loading rule 'graphql/template-strings': Must provide .graphqlconfig file or pass in `schemaJson` option with schema object or `schemaJsonFilepath` with absolute path to the json file.
    at parseOptions (/home/mekhami/Work/portaldemo/node_modules/eslint-plugin-graphql/lib/index.js:325:15)
    at /home/mekhami/Work/portaldemo/node_modules/eslint-plugin-graphql/lib/index.js:198:16
    at _loop (/home/mekhami/Work/portaldemo/node_modules/eslint-plugin-graphql/lib/index.js:83:27)
    at createRule (/home/mekhami/Work/portaldemo/node_modules/eslint-plugin-graphql/lib/index.js:102:7)
    at Object.create (/home/mekhami/Work/portaldemo/node_modules/eslint-plugin-graphql/lib/index.js:197:14)
    at createRuleListeners (/home/mekhami/Work/portaldemo/node_modules/eslint/lib/linter.js:682:21)
    at Object.keys.forEach.ruleId (/home/mekhami/Work/portaldemo/node_modules/eslint/lib/linter.js:841:31)
    at Array.forEach (<anonymous>)
    at runRules (/home/mekhami/Work/portaldemo/node_modules/eslint/lib/linter.js:781:34)
    at Linter._verifyWithoutProcessors (/home/mekhami/Work/portaldemo/node_modules/eslint/lib/linter.js:1003:33)
    at preprocess.map.textBlock (/home/mekhami/Work/portaldemo/node_modules/eslint/lib/linter.js:1046:35)
    at Array.map (<anonymous>)
    at Linter.verify (/home/mekhami/Work/portaldemo/node_modules/eslint/lib/linter.js:1045:42)
    at Linter.verifyAndFix (/home/mekhami/Work/portaldemo/node_modules/eslint/lib/linter.js:1138:29)
    at processText (/home/mekhami/Work/portaldemo/node_modules/eslint/lib/cli-engine.js:180:32)
    at CLIEngine.executeOnText (/home/mekhami/Work/portaldemo/node_modules/eslint/lib/cli-engine.js:620:17)

 @ multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js

graphql-client token was stored in localStorage then won't work in SSR?

Hi, sorry if I ask a stupid question. I have not tried it yet, but I see the token was stored in localStorage, then it will not work in SSR right? If so, is there anyway to do to make token work with SSR?

vue-cli 3.0.0.beta.16: ERROR TypeError: Cannot read property 'cacheIdentifier' of undefined

hi i got that error

ERROR TypeError: Cannot read property 'cacheIdentifier' of undefined

TypeError: Cannot read property 'cacheIdentifier' of undefined
    at config.module.rule.test.use.tap.options (C:\Users\marko\Desktop\graphqll\client\node_modules\vue-cli-plugin-apollo\index.js:49:36)
    at Object.tap (C:\Users\marko\Desktop\graphqll\client\node_modules\webpack-chain\src\Use.js:14:20)
    at api.chainWebpack.config (C:\Users\marko\Desktop\graphqll\client\node_modules\vue-cli-plugin-apollo\index.js:47:10)
    at webpackChainFns.forEach.fn (C:\Users\marko\Desktop\graphqll\client\node_modules\@vue\cli-service\lib\Service.js:173:40)
    at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (C:\Users\marko\Desktop\graphqll\client\node_modules\@vue\cli-service\lib\Service.js:173:26)
    at Service.resolveWebpackConfig (C:\Users\marko\Desktop\graphqll\client\node_modules\@vue\cli-service\lib\Service.js:177:48)
    at PluginAPI.resolveWebpackConfig (C:\Users\marko\Desktop\graphqll\client\node_modules\@vue\cli-service\lib\PluginAPI.js:103:25)
    at serve (C:\Users\marko\Desktop\graphqll\client\node_modules\@vue\cli-service\lib\commands\serve.js:46:31)
    at Service.run (C:\Users\marko\Desktop\graphqll\client\node_modules\@vue\cli-service\lib\Service.js:167:12)
    at Object.<anonymous> (C:\Users\marko\Desktop\graphqll\client\node_modules\@vue\cli-service\bin\vue-cli-service.js:22:9)
    at Module._compile (module.js:662:30)
    at Object.Module._extensions..js (module.js:673:10)
    at Module.load (module.js:575:32)
    at tryModuleLoad (module.js:515:12)
    at Function.Module._load (module.js:507:3)

Current plugins: https://gyazo.com/6fa3cef27fc2016d447ead99591eec40

i dont know what happen :D

No gql loader

This doesn't seem to install the gql loader. I had to install the loader by hand into build/webpack.base.conf.js, with the rest of the loaders in module: rules:, then it worked:

      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: 'graphql-tag/loader'
      }

Updating graphql dependency from 0.13 to 14.0 should be a breaking change

See changelog: https://github.com/graphql/graphql-js/releases/tag/v14.0.0
This update introduced several breaking changes, some of which causes bugs in vue-cli.
For example:

1. vuejs/vue-cli#2577
2. graphql/graphql-js@3521e14#diff-87c5e74dd1f7d923143e0eee611f598eR183 Strict coercion of scalar types in v14 (seemingly) fails the plugin installation page (as seen in the ci output https://circleci.com/gh/vuejs/vue-cli/7865)

Can't import .gql files out of the box

Created a fresh project via vue create apollo and didn't add any extra options (just Babel). Installed this plugin, ran yarn serve, and I can see there's no graphql loader:

Module Warning (from ./node_modules/eslint-loader/index.js):
error: Parsing error: Unexpected character '#'

> 1 | #import "./FileFragment.gql"
    | ^
  2 |
  3 | mutation uploadFile ($file: Upload!) {
  4 |   singleUpload (file: $file) { at src/graphql/UploadFile.gql:1:1:
> 1 | #import "./FileFragment.gql"
    | ^
  2 |
  3 | mutation uploadFile ($file: Upload!) {
  4 |   singleUpload (file: $file) {

Import/export support for graphql-api

Is there a way to enable ES6 support for the graphql-api? I'm using some ES6 modules and it would be nice if this is supported out-of-the-box.

How to debug apollo:watch with VS Code?

Is there currently a way to run apollo:watch with --inspect or --inspect-brk in order to attach a debugger (e.g. from vscode) to use break-points e.g. in resolvers.js?

Make typescript support

Typescript linter not taking .js files. Can you add option "Typescript support" to rename all files to .ts ?

Newly created project doesn't build

Thanks for making this. I wanted to use the CLI plugin to get started fiddling with Vue & GraphQL, but failed miserably:

Steps to reproduce

vue create vue-cli-plugin-apollo-test # default options selected
cd vue-cli-plugin-apollo-test/
vue add apollo # add example code but not server
npm run serve

Expected result

A working example.

Actual result

The following errors:

 INFO  Starting development server...
 94% after seal                                                                           

 ERROR  Failed to compile with 164 errors                                                                                           09:09:54

 error  in ./node_modules/graphql/index.mjs

Can't reexport the named export 'BREAK' from non EcmaScript module (only default export is available)

 error  in ./node_modules/graphql/index.mjs

Can't reexport the named export 'BreakingChangeType' from non EcmaScript module (only default export is available)

...

Environment info

node v9.7.1
npm v5.6.0
vue-cli v3.0.3

npm ls reports the following errors:

npm ERR! peer dep missing: @babel/core@^7.0.0, required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]

Output of npm ls in attached file.
npm-ls.txt

Please let me know if you need any more info.

vue-cli commands dont exit correctly when upgrading vue-cli-plugin-apollo from v0.13.7 to v0.13.8

See related issue here, other seem to experience the same problem;
vuejs/vue-cli#1622

@Akryum any idea why this happens?

TypeError: Cannot read property 'emit' of undefined

Hi @Akryum!

Several times, don't know why, when watching the server, I've this error:

⏳  GraphQL API is restarting...
$ vue-cli-service apollo:run --delay
/Users/mathieutu/Projects/askip/node_modules/@vue/cli-shared-utils/lib/ipc.js:41
      ipc.of[this.id].emit(type, data)
                      ^

TypeError: Cannot read property 'emit' of undefined
    at IpcMessenger.send (/Users/mathieutu/Projects/askip/node_modules/@vue/cli-shared-utils/lib/ipc.js:41:23)
    at IpcMessenger.disconnect (/Users/mathieutu/Projects/askip/node_modules/@vue/cli-shared-utils/lib/ipc.js:80:10)
    at Timeout.setTimeout [as _onTimeout] (/Users/mathieutu/Projects/askip/node_modules/vue-cli-plugin-apollo/index.js:229:11)
    at ontimeout (timers.js:498:11)
    at tryOnTimeout (timers.js:323:5)
    at Timer.listOnTimeout (timers.js:290:5)
error Command failed with exit code 1.

Usually I restart the server, and it's ok.
Any idea?

Corrupted fonts & images

Using "vue add apollo" on an existing project with images & fonts led to those files being corrupted. This includes files in both the public and src folders. I noticed those files are included when the install tells you "the following files have been updated / added."

"Running the server in production" has more dependencies

According to the README, it should suffice to move vue-cli-plugin-apollo from the devDependencies to the dependencies.

Unforatunately however, the command vue-cli-service apollo:run --mode production not only requires @vue/cli-service, but also all other @vue/cli-plugin to be moved. Otherwise Service.resolvePlugins runs into an Cannot find module '@vue/cli-plugin-* error. Here's what I did:

rm -rf node_modules
yarn install --prod
yarn run vue-cli-service apollo:run --mode production

Would it be a realistic solution to add an apollo:build task that builds the server with all dependencies to apollo-server/dist or is that out of scope?

Error: You are calling concat on a terminating link, which will have no effect

When trying to createApolloClient({ link: retryLink })

changed a line in graphql-client/src/index.js from link = httpLink.concat(link) to link = from([link, httpLink])
and it works fine

ERROR Error: Type "Upload" was defined more than once.

Following exactly the install steps (including the graphql server api) - after your fascinating presentation at VueConf Amsterdam. All works well up to the point of npm run apollo Any idea what's going wrong? Error paste below:

ERROR Error: Type "Upload" was defined more than once. Error: Type "Upload" was defined more than once. at Object.buildASTSchema (/home/dylan/CodeWorkspace/my-new-app/node_modules/graphql/utilities/buildASTSchema.js:116:17) at Object.buildSchemaFromTypeDefinitions (/home/dylan/CodeWorkspace/my-new-app/node_modules/graphql-tools/dist/generate/buildSchemaFromTypeDefinitions.js:24:28) at _generateSchema (/home/dylan/CodeWorkspace/my-new-app/node_modules/graphql-tools/dist/makeExecutableSchema.js:29:29) at Object.makeExecutableSchema (/home/dylan/CodeWorkspace/my-new-app/node_modules/graphql-tools/dist/makeExecutableSchema.js:47:20) at new ApolloServerBase (/home/dylan/CodeWorkspace/my-new-app/node_modules/apollo-server-core/dist/ApolloServer.js:89:31) at new ApolloServer (/home/dylan/CodeWorkspace/my-new-app/node_modules/apollo-server-express/dist/ApolloServer.js:41:1) at module.exports (/home/dylan/CodeWorkspace/my-new-app/node_modules/vue-cli-plugin-apollo/graphql-server/index.js:127:18) at run (/home/dylan/CodeWorkspace/my-new-app/node_modules/vue-cli-plugin-apollo/index.js:164:7) at api.registerCommand.args (/home/dylan/CodeWorkspace/my-new-app/node_modules/vue-cli-plugin-apollo/index.js:176:7) at Service.run (/home/dylan/CodeWorkspace/my-new-app/node_modules/@vue/cli-service/lib/Service.js:179:12) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] apollo:run: `vue-cli-service apollo:run` npm ERR! Exit status 1 npm ERR!

Make graphql-api server folder path/name configurable

Hi,

It would be great if we had to possibility to configure the graphql-api a bit more. For example I would like to call it graphql-server and live in the root. This is currently not possible but would allow for a more flexible setup.

It might also be a good idea to seperate the graphql-api into a seperate vue-cli package at some point.

@Akryum what are your thoughts? I would love to help out with this but I can't start for a few days.

GRAPHQL_ENDPOINT environment variable

I'm having trouble setting the GRAPHQL_ENDPOINT environment variable.

The vue-cli docs states that:
Only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin.

Should GRAPHQL_ENDPOINT be renamed VUE_APP_GRAPHQL_ENDPOINT, or am I missing something?