Use apollo-codegen itself as webpack loader

[infogulch]

Once apollo-codegen generated source produces a fully-typesafe callable function directly from a .graphql source file (a la #308), what I'd love to see is to convert/wrap apollo-codegen into a webpack-style loader where you load a .graphql file, and it exports the mentioned typesafe functions directly.

The idea is to add the loader, somehow point it to an existing schema.json file, and when you import from a .graphql/.gql file it automatically generates everything you need without any generation step. Like a higher-level graphql-tag loader.

This is is the experience I would hope for:

[myquery.graphql]

query FetchRestaurants($menuItemId: String!) {
  fetchMenuItem(menuItemId: $menuItemId) {
    id
    categoryId
  }
}

[mycode.ts]

import { FetchResturants } from './myquery.graphql';
// no running `apollo-codegen generate` , creating or checking in additional files, etc.

function doStuff(client: GraphQLClient) {
  // ok
  FetchResturants(client, "1a3fd").subscribe((result) => {
    console.log(result.data.fetchMenuItem[0].categoryId);
  });

  // type error: FetchResturants takes a string not an integer
  FetchResturants(client, 123).subscribe((result) => {
    // type error: fetchMenuItem has no property named `category` (it's `categoryId`)
    console.log(result.data.fetchMenuItem[0].category);
  });
}

These libraries are so close to a completely typesafe but also trivial to use api surface all the way from the server through client libraries into UI components via GraphQL I can taste it.

[bgw]

For this to work properly, you'd need support for type providers.

Typescript has an open issue for this: microsoft/TypeScript#3136
And Flow does too: facebook/flow#722

[infogulch]

Ah I see. Thanks for the links.

It looks like neither of those are moving very quickly, unfortunately.

I'd still love this, but 308 looks more immediately attainable. :)

[maxpain]

any news?