将 .graphql 中的类型导入 .js 文件答案

【问题标题】：Import types from .graphql into a .js file将 .graphql 中的类型导入 .js 文件
【发布时间】：2019-03-26 21:00:15
【问题描述】：

我从.graphql 文件中搜索了一些有关导入类型的信息。我发现graphql-import 可以使用# import something from 'something-else' 导入。这在.graphql 文件之间运行良好。

但我想做的是从 Prisma 的 generated.graphql 导入一些 types 到 .js 文件中。

例如：

我有这个来自 Prisma 的 generated.graphql 文件

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

type ItemConnection { ... }

...

我想将ItemWhereInput和ItemConnection这两种类型从generated.graphql文件导入items-types.js文件

// 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];

这样我就可以从graphql-tools 调用makeExecutableSchema 并在其他地方使用这些类型

// 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,
};

如果它在其他地方或者有什么可以帮助的，请指出我。

谢谢。

【问题讨论】：

标签： javascript types import graphql prisma

【解决方案1】：

您应该能够做到以下几点：

在你的构建步骤中，首先，将你的generated.graphql文件转换成一个js文件

在文件开头添加export default `，
`); 到文件末尾，和
将其重命名为generated.js。

这样，您可以在开发代码中将文件作为 js 文件导入：

// 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);

你会看到schema是文件pre-build-step的内容字符串。

它现在可以用作makeExecutableSchema 的typeDef：

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

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

如果您使用捆绑器和/或转译器，则必须完成一些额外的工作，以确保文件也可以通过这些工具运行。我使用这种方法的项目只使用了 babel，这是一个问题：

使用 npm-watch 代替 babel 的 --watch 选项来运行构建脚本
（可以并行完成）
- 在所有源 .js 文件上运行 babel
- 在所有 .graphql 文件上运行自定义脚本，其中：
  1. 将相关代码添加到文件中，使其成为有效的js（内存中）
  2. 以编程方式在结果上运行 babel
  3. 使用 .js 扩展名将其保存到构建目标

但要小心处理大文件，因为它们是通过这种方法加载到内存中的！

但请注意，因为这种方法不适用于捆绑器，因此您必须在运行捆绑器之前转换文件（并且以某种方式仍然保留旧版本，可能通过以不同方式命名转换后的版本并在之后删除它运行捆绑器），或查找/创建一个插件为您完成这项工作。以下是我找到的一些选项（快速谷歌搜索）：webpack 和 Parcel。

【讨论】：