Graphql 打字稿打字和代码生成

Question

名为 apollo-codegen 的库允许在客户端上为 graphQL 模式创建类型。但是它希望将gql 查询放入.graphql 文件中。

我的问题是：当它们在 .graphql 文件中时，我如何使用查询？

我以前在我的 .ts 文件中这样做

const ssQuery = gql`
    subscription suppliers {
        suppliers {
            id,
            name
        }
    }
`;

Answer 1

假设您使用的是 webpack，graphql-tag 包含一个用于导入查询的加载器。

// webpack.config.js

loaders: [
  {
    test: /\.(graphql|gql)$/,
    exclude: /node_modules/,
    loader: 'graphql-tag/loader'
  }
]

// in your project
import MY_QUERY from './my-query.graphql'

graphql(MY_QUERY)(MyComponent)

请注意，这样做意味着每个文件应该只有一个查询/变异/订阅。但是，您也可以为片段创建文件并将它们导入到 graphql 文件中（虽然不确定 apollo-codegen 是否支持这种语法）。