Flow: Flow error when importing `graphql` files

[nlhkh]

I am seeing error when importing graphql file. I am aware that GraphQL support is underway, but in the mean time, is it possible to tell Flow to ignore this?

import ProductQuery from './ProductQuery.graphql'
                              ^^^^^^^^^^^^^^^^^^^^^^^^ ./ProductQuery.graphql. Required module not found

[ryyppy]

Yep, you can use a name mapper and map it to a specific type definition in the [options] configuration... see https://flowtype.org/docs/modules.html#aliasing-module-names for more info

[ryyppy]

Here is an example how react-native deals with images:
https://github.com/facebook/react-native/blob/master/.flowconfig#L36

[nlhkh]

@ryyppy where does the GlobalImageStub come from? Is it something predefined?

[phpnode]

@nlhkh it just needs to map to a module that does nothing, I use https://www.npmjs.com/package/empty for this, here's the corresponding line in my .flowconfig:

module.name_mapper='.*\(.graphql\)' -> 'empty/object'

[ryyppy]

@nlhkh GlobalImageStub is a file somewhere in the react-native codebase, which is defined as a so-called haste module... (which needs the module.system=haste option activated)...

So this means it parses all the files for a @providesModule GlobalImageStub and remembers the original path to the defining file...

Anyways,.. for your case, you can define your own file e.g. scripts/myStub.js and put a name_mapper rule like this: module.name_mapper='.*\.graphql' -> '<PROJECT_ROOT>/scripts/myStub.js'

@phpnode 's approach via node_module is also nice!

[nlhkh]

Thanks @phpnode and @ryyppy, this works! I am happy with an empty object for now.

[Rhjulskov]

@phpnode, @ryyppy Adding the single line module.name_mapper='.*(.graphql)' -> 'empty/object' to .flowconfig [options] gives the exact same file as in the original question. Are you still using it?

[benhjames]

It's possible to get type information too (instead of being an empty object) by creating a file e.g. utils/graphqlShim.js:

/* @flow */

import type { DocumentNode } from 'graphql';

declare export default DocumentNode

and then adding this to your .flowconfig:

[options]
module.name_mapper.extension='graphql' -> '<PROJECT_ROOT>/utils/graphqlShim'

[JuHwon]

@benhjames i configured my project like you explained above.
when i try to import multiple queries from one file like the following i get an error that it cannot import those modules since they are not defined.

import {
  AddKeyMutation
  DeleteKeyMutation
} from './mutations.gql'

i guess its not possible since the shim has not specified any module exports.
Do you guys have any suggestions how a multiple query import from one file could work?