0

我在文件中定义了一些操作（查询/突变，有时在文件底部有一些片段）.gql，有时在单个文件中定义了多个操作。

我想将这些导入到我的 JS/TS 文件中，可能还会为 TypeScript 生成相应的类型。

我在这里设置了一个 3 个文件的示例：

https://gist.github.com/balazsorban44/352d5295f604fb4274bfc934937737a1

该queries.gql文件是源。它们应该在文件中生成相应的模块类型（请参阅参考资料generated-types.d.ts），因此我可以将它们导入到我的index.ts文件中，并使用它通过简单的fetch.

到目前为止，我尝试过的是这些工具/包：

据我所知，以上这些都不支持作为字符串导出的每个文件的多个操作，仅支持作为 DocumentNode 的多个操作，或者将整个文件作为字符串。

让我知道是否还有其他问题。

4

1 回答 1

0

使用graphql-tools和分离操作的文档加载的解决方案- 用于拆分 AST 的实用程序函数。以下是步骤：

  1. .gql从文件加载文档
  2. 将这个包罗万象的 AST 分成单独的 AST，这些 AST 代表可以单独发送到服务器的每个操作。
  3. 使用包的打印功能将DocumentNode（AST）转换为字符串。graphql

例如

queries.gql：

query Something {
  name
  id
}

query SomethingElse($email: String!) {
  somethingelse(email: $email) {
    phone
    ...SomeFragment
  }
}

fragment SomeFragment on User {
  email
  address
}

index.ts：

import { loadDocumentsSync } from '@graphql-tools/load';
import { GraphQLFileLoader } from '@graphql-tools/graphql-file-loader';
import path from 'path';
import { separateOperations, print, buildSchema } from 'graphql';
import express from 'express';
import { graphqlHTTP } from 'express-graphql';
import fetch from 'node-fetch';

const documents = loadDocumentsSync(path.resolve(__dirname, './queries.gql'), {
  loaders: [new GraphQLFileLoader()],
});
const { Something, SomethingElse } = separateOperations(documents[0].document!);

console.log(print(Something));
console.log(print(SomethingElse));

// server
const schema = buildSchema(`
  type User {
    id: ID!
    name: String
    email: String
    address: String
    phone: String
  }
  type Query {
    somethingelse(email: String!): User
    Something: User
  }
`);
const root = {
  somethingelse({ email }) {
    return { id: 1, name: 'teresa teng', email, address: 'Japan', phone: '123' };
  },
};
const app = express();
app.use(
  '/graphql',
  graphqlHTTP({
    schema: schema,
    rootValue: root,
    graphiql: true,
  }),
);
app.listen(4000, () => console.log('graphql server running on localhost 4000'));

// test
fetch('http://localhost:4000/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ query: print(SomethingElse), variables: { email: 'teresa.teng@gmail.com' } }),
})
  .then((res) => res.json())
  .then((res) => console.log(res))
  .catch(console.error);

执行结果：

query Something {
  name
  id
}

query SomethingElse($email: String!) {
  somethingelse(email: $email) {
    phone
    ...SomeFragment
  }
}

fragment SomeFragment on User {
  email
  address
}

graphql server running on localhost 4000
{ data:
   { somethingelse:
      { phone: '123',
        email: 'teresa.teng@gmail.com',
        address: 'Japan' } } }

顺便说一句，如果您提供的工具/包可以从.gql文件中加载文档，您可以使用它而不是使用graphql-tools. 其余步骤相同。

于 2020-09-30T07:58:31.237 回答