Make typescript support

[numfin]

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

[pkej]

And include typescript interfaces (https://github.com/Akryum/vue-apollo/tree/master/types)

[numfin]

Holy shit dude! Last commits are huuuuge! You are awesome! ❤️

[AndrewO]

I'm working through getting Vue + TypeScript + Apollo playing nicely and found an issue. This looks like the place to add it, but let me know if I should open another issue instead.

import MESSAGE_ADD_MUTATION from '../graphql/MessageAdd.gql' doesn't compile in TypeScript in the current initial configuration. The compiler throws cannot find module.

I tracked it down to an issue with ts-loader and graphql-tag not playing nicely. Apparently ts-loader needs to be told how to import gql files. See this note in the ts-transform-graphql-tag.

My solution was to npm i --save-dev ts-transform-graphql-tag and then in vue.config.js's chainWebpack:

module.exports = {
  chainWebpack: config => {
    const graphQlTagToTs = require('ts-transform-graphql-tag').getTransformer

    config.module
      .rule('ts')
        .use('ts-loader')
          .tap(options => ({
            getCustomTransformers: () => ({ before: [graphQlTagToTs()] }),
            ...options
          }));
  }
}

VS Code still says it can't import, but the compiler seems happy.

Also, following advice from apollographql/graphql-tag#42 I created a src/graphql/index.d.ts with this:

declare module "*.gql" {
  const content: any;
  export default content;
}

I'm not sure if that was part of the overall solution or not, so I'll just leave it here in case anyone else is working through it.

[mathieutu]

Hey folks, could you try if the pr I made works for you?

You have to change all you're entry files to .ts, and:

package.json

{
    "vue-cli-plugin-apollo": "mathieutu/vue-cli-plugin-apollo#typescript",
}

vue.config.js

pluginOptions: {
    apollo: {
        typescript: true,
    },

[mathieutu]

Actually I've made an update, and you don't even have to rename all files and add the option if you already have the typescript plugin !

[yordis]

I am actually using this as the typespec

declare module "*.graphql" {
  import { DocumentNode } from "graphql";

  const content: DocumentNode;
  export default content;
}

[mathieutu]

@Akryum I think we can close this, don't you?