Query Deduplication doesn't work with babel-plugin-import-graphql

[sfcgeorge]

Intended outcome:

Dedup identical queries.

Actual outcome:

Not deduped with babel-plugin-import-graphql when they were with inline gql.

How to reproduce the issue:

Change a query from using gql to using import-graphql. If it's run from multiple components it won't be deduplicated any more.

https://github.com/detrohutt/babel-plugin-import-graphql

Versions

├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]

[benjamn]

In [email protected], queries are deduplicated only according to the object reference of the DocumentNode, whereas previously apollo-link-dedup went to the trouble of reprinting the entire query to come up with a (mostly) canonical string to use as a key for deduplication. Not only was this reprinting costly, but it was one of the only remaining places where typical Apollo applications depended on graphql/language/printer—apollo-link-http-common now has the only remaining dependency, and I hope to eliminate that, too.

Though I'm not familiar with the details of babel-plugin-import-graphql, intuitively it seems like you should be able to define each query in one place, and then import the resulting DocumentNode from that module wherever you need it, which would make query deduplication work again. Can you shed some light on whether or not that's feasible?

[sfcgeorge]

I do have just a single query in a fooBarQuery.graphql file.

The import looks like import fooBarQuery from 'fooBarQuery.graphql'.

I think where things are going wrong is the plugin caches the AST or whatever gql spits out. There is an option to use graphql-tag at runtime which does make deduplication work again, so that's what I've done for now but means more dependencies and more going on at runtime.

So some things dedup, some don't, and they all seem to kinda use gql so I'm not sure what's up where:

• ✅ gql inline
• ✅ babel-plugin-graphql-tag
• 🚫 babel-plugin-import-graphql

Somewhere in Apollo docs both of those plugins are recommended. And I assume not parsing queries at runtime is better? (Obviously not if it doesn't dedup though)

I did try to repro but CodeSanbox's Babel plugin support appears to be broken.

[benjamn]

Ok, I will look into your reproduction and see what I can figure out. Thanks!

[sfcgeorge]

I tried the official webpack loader instead and that actually seems to work great. Doesn't need gql at runtime, and dedup is working.

https://github.com/apollographql/graphql-tag#webpack-preprocessing-with-graphql-tagloader

The babel plugin's runtime option doesn't really work now, it intermittently complains ReferenceError: gql is not defined. This is where you recommend it:

https://github.com/apollographql/graphql-tag#react-native-nextjs

I'd maybe suggest removing that recommendation. I guess it's useful if not using Webpack but it's a bit broken currently. I think this issue can be closed, perhaps a new issue upstream.