Import types from .graphql into a .js file

Question

I've searched something about import types from .graphql files. I've found graphql-import to import using # import something from 'something-else' . This works fine between .graphql files.

But what I'm trying to do is to import some types from generated.graphql from Prisma into a .js file.

For example:

I have this generated.graphql file from Prisma

"""generated.graphql file"""
type ItemWhereInput { ... }

type ItemConnection { ... }

...

I would like to import those two types ItemWhereInput and ItemConnection from generated.graphql file into items-types.js file

// items-types.js file

import gql from 'graphql-tag';
// I would like to make some kind of import ItemWhereInput and ItemConnection here
// Something like `import { ItemWhereInput, ItemConnection } from 'generated.graphql'`

... 

const ItemWhereUniqueInput = gql`
  input ItemWhereUniqueInput {
    id: String!
  }
`;

... 

// And export ItemWhereInput and ItemConnection here
export default [Item, ItemInput, ItemWhereUniqueInput, ItemUpdateInput]; 

That way I could call makeExecutableSchema from graphql-tools and use those types in some place else

// items-query.js file

import { forwardTo } from 'prisma-binding';

const schema = `
  items: [Item]!
  item (where: ItemWhereUniqueInput!): Item

  # And use it here
  itemsConnection (where: ItemWhereInput): ItemConnection!
`;

const resolvers = {
  items: forwardTo(‘db’),
  item: forwardTo(‘db’),
  itemsConnection: forwardTo(‘db’),
};

export default {
  schema,
  resolvers,
};

If it is somewhere else or there are something that could help, please, point me out.

Thanks.

Answer 1

You should be able to do the following:

During your build step, first, transform your generated.graphql file into a js file by

1. adding export default ` to the beginning of the file,
2. `); to the end of the file, and
3. renaming it to generated.js .

This way, you can import the file just as a js file in your development code:

// some other js file

/* 
 * notice the lack of .js, this should make it easier for your 
 * IDE to understand you're referencing the 'generated.graphql' file.
 * If this is not possible in your code, you actually have to say
 * .js here, not .graphql, because the file will be called .js after
 * build.
 */
import generated from './generated';

console.log(generated);

You will see that schema is a string of the contents of the file pre-build-step.

It can now be used as typeDefs for makeExecutableSchema :

import { makeExecutableSchema } from 'graphql-tools';
import typeDefs from './generated';
import resolvers from './resolvers';

const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
});

---

If you use a bundler and/or transpiler some additional work has to be done, to make sure the file is also run through these tools. The project I've used this approach on only uses babel, with which it is a matter of:

1. using npm-watch instead of babel's --watch option to run the build script
2. (can be done in parallel)
   • running babel on all source .js files
   • running a custom script on all .graphql files, which:
     1. adds the relevant code to the file, to make it valid js (in-memory)
     2. programmatically runs babel on the result
     3. saves it to the build destination with .js extension

Careful with large files though, as they are loaded to memory with this method!

Beware though, as this approach does not work with a bundler, for which you will have to either transform the file before running the bundler (and somehow still retain the old version, probably by naming the transformed version differently and deleting it after running the bundler), or find/create a Plugin doing this work for you. Here are some options I found (quick google search): for webpack and Parcel .