时间戳

首页 > 解决方案 > Graphql 打字稿打字和代码生成

typescript - Graphql 打字稿打字和代码生成

问题描述

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

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

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

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

标签： typescriptgraphqlapolloapollo-client

解决方案

假设您使用的是 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 是否支持这种语法）。

推荐阅读