Apollo-tooling: Fragments via interpolated strings in gql tags

[crucialfelix]

I notice that interpolated values are being stripped out of the gql contents. This means constants like ${LIMIT} but also fragments like ${ProjectListItem.fragments.project} are replaced with ''

https://github.com/apollographql/apollo-codegen/blob/master/src/loading.ts#L34

eg:

const DAY_QUERY = gql`
  query Day($date: String) {
    viewer {
      days(date:$date) {
        edges {
          node {
            id
            tasks {
              edges {
                node {
                  ...TasksAppTask
                }
              }
            }
          }
        }
      }
    }
  }
  ${TasksApp.fragments.task}`

Results in:

error: Cannot find fragment "TasksAppTask"

Maybe I'm just doing fragments the old way, but this is still the documented way: http://dev.apollodata.com/react/fragments.html

How should we be including fragments so that we can enjoy glorious magic of apollo-codegen ?

Switch to separate files and use webpack and #import to generate them ?

Thanks,

---

Now strangely enough I have gotten this to work if I run this on the command line:

apollo-codegen generate client/**/*.tsx --schema schema.json --target typescript --output query-types.ts

with globally installed apollo-codegen 0.15.2

This does generate a types file with all fragments.

But not when running it from within the package:

"scripts": {
    "query-types": "apollo-codegen generate client/**/*.tsx --schema schema.json --target typescript --output query-types.ts"
}

yarn run query-types

    "apollo-codegen": "^0.15.2",
    "apollo-client": "^1.9.0-0",
    "graphql": "^0.10.5",
    "graphql-tag": "^2.4.2",

I don't yet know what could be different. yarn vs npm. I run the script using yarn, but on the command line I run it with apollo-codegen which is a different install with global npm.

[rricard]

Unfortunately, at the moment, codegen will have issues with interpolated fragments and has not been created to work with them. We have the document collector as the supposedly main way to use with codegen. Handling interpolations may be hard at the moment and we don't intend to support it soon. I'll keep this issue open though and we'll try to fix it if we can.

[crucialfelix]

I've moved all my queries and fragments into .graphql files and I now use the webpack graphql-loader powered #import "other.graphql" style. I like it actually, everything is separated and easier to read. So I would recommend that to others with the same problem.

VSCode is now showing me (on hover) the shape of the query result with all types and this is actually better than scrolling up and trying to read the graphql query. This is actually awesome.

I can understand that apollo-codegen just regex matches the gql tags and plucks out the source. It can't run the js/ts really because this opens up all kinds of problems when there are syntax errors (because it's a WIP). You can't import the types until you've generated them, and you can't generate them until your app compiles without error.

I'm always impressed that typescript manages to keep working even while you are typing and screwing things up.

[rricard]

Yes, definitely that, the ultimate solution to that issue would be to start reading js files with the babylon parser or the tsc, do a bit of interpretation and then resolve it. As I see it, that's really hard to do for not that much return...

[chollier]

I wish I'd be able to generate flow types for my entire query in a similar manner than with Relay, without interpolation the use is limited

[crucialfelix]

btw. I wrote an article about this with examples: https://medium.com/@crucialfelix/bridging-the-server-client-gap-graphql-typescript-and-apollo-codegen-e5b54fa96ae2

It shows how and why I decided that separate .graphql files were fine.

I do like how Relay does it now by passing in the fragment objects (not by interpolation)

[chollier]

I wonder if the recent improvements in https://github.com/gajus/babel-plugin-graphql-tag could help getting there since this package is able to transform and a query with interpolations into an IR

[Grmiade]

@crucialfelix You should use single quote to wrapper your regex ;)

"scripts": {
    "query-types": "apollo-codegen generate 'client/**/*.tsx' --schema schema.json --target typescript --output query-types.ts"
}

[mernxl]

hello, I am using the apollo-cli @1.1.1 with angular @6.0.0, but having issues with gql string fragmen interpolations when i run apollo schema:checkQueries. Also the queries work well with backend.

Note: apollo codegen:generate works perfectly with no errors, but apollo schema:checkQueries fails with errors below.

[02:22:08] Checking query compatibility with schema (8/8, 2 errors, 0 warnings) [title changed]
[02:22:08] Checking query compatibility with schema (8/8, 2 errors, 0 warnings) [failed]
[02:22:08] → undefined

 ›   Error: 
 ›   Fragment "FragmentClientHubTableInfo" is never used.
 ›
 ›   src/app/pages/client-hub/graphql/fragments.ts (2:3)
 ›   1: 
 ›   2:   fragment FragmentClientHubTableInfo on Client {
 ›         ^
 ›   3:     fullName
 ›
 ›   Unknown fragment "FragmentClientHubTableInfo".
 ›
 ›   src/app/pages/client-hub/graphql/queries.ts (5:10)
 ›   4:       _id
 ›   5:       ...FragmentClientHubTableInfo
 ›                ^
 ›   6:     }
 ›
 ›
error Command failed with exit code 2.

Found @crucialfelix post with the graphql-tag/loader, but i would really love if someone could provide a snippet on integrating that to angular @6.0.0.

I have the following file structure

• graphql
  
  
  
  • queries.ts
  
  
  • fragments.ts
  
  
  • mutations.ts
  
  

queries.ts

import gql from 'graphql-tag';
import { FRAGMENT_CLIENT_HUB_TABLE_INFO } from './fragments';

// client-hub table
export const QUERY_CLIENT_HUB_TABLE = gql`
  query QueryClientHubTable {
    clientMany {
      _id
      ...FragmentClientHubTableInfo
    }
  }

  ${FRAGMENT_CLIENT_HUB_TABLE_INFO}
`;

fragments.ts

import gql from 'graphql-tag';

export const FRAGMENT_CLIENT_HUB_TABLE_INFO = gql`
  fragment FragmentClientHubTableInfo on Client {
    fullName
    email phone
    fullAddress
  }
`;

My Scripts

"scripts": {
    "apollo:codegen:generate": "yarn run apollo:schema:download && apollo codegen:generate src/app/graphql --addTypename --target=typescript --schema=graphql.schema.json --queries=src/app/**/*.ts",
    "apollo:schema:download": "apollo schema:download graphql.schema.json --endpoint=http://localhost:4040/graphql",
    "apollo:schema:checkQueries": "yarn run apollo:schema:download && apollo schema:checkQueries --schema=graphql.schema.json --queries=src/app/**/*.ts"
}