我创建了一个从TypeScript类型定义生成GraphQL查询的库

2 年 ago
科, 雅
1 minute

总结

实验性地，我创建了一个名为 typed-graphqlify 的库。

这个库可以从类似于TypeScript类型定义的东西生成GraphQL字符串。
如果能够解决TypeScript + GraphQL的问题，那就太好了。

image.png

动力

GraphQL虽然强大，但在处理返回值时，有时需要额外管理TypeScript的类型定义，这一点很麻烦。

我认为普通写的话会变成这样的感觉。

interface GetUserQueryData {
  getUser: {
    id: number
    name: string
    bankAccount: {
      id: number
      branch: string
    }
  }
}

const query = graphql(gql`
  query getUser {
    user {
      id
      name
      bankAccount {
        id
        branch
      }
    }
  }
`)

apolloClient.query<GetUserQueryData>(query).then(data => ...)

既然我们已经在TypeScript中定义了类型，如果能自动生成GraphQL，那就很方便了哦。

因此，typed-graphqlify 可以從將 TypeScript 的型定義和 GraphQL 相結合的 JavaScript 物件中取得兩者的平均值，並生成 GraphQL 字串。

使用方法 (Shiyong fangfa)

安装

yarn add typed-graphqlify

例如

首先，创建类似于 GraphQL 的 JavaScript 对象。这个对象将直接作为类型定义。

import { graphqlify, types } from 'typed-graphqlify'

const getUserQuery = {
  getUser: {
    user: {
      __params: { id: 1 },
      id: types.number,
      name: types.string,
      bankAccount: {
        id: types.number,
        branch: types.string,
      },
    },
  },
}

请注意使用Types中的类似TypeScript的类型定义。

接下来，我们将使用graphqlify函数将其转换为字符串。

const gqlString = graphqlify('query', getUserQuery)

console.log(gqlString)
// =>
//   query getUser {
//     user(id: 1) {
//       id
//       name
//       bankAccount {
//         id
//         branch
//       }
//     }
//   }

最后，我们执行GraphQL。

// We would like to type this!
const result: typeof getUser = executeGraphql(graphqlify('query', getUser))

//`result` を `typeof getUser` にキャストしたので、型定義が生きている
// `result` の型はこんな感じ。
// interface result {
//   user: {
//     id: number
//     name: string
//     bankAccount: {
//       id: number
//       branch: string
//     }
//   }
// }

如果一切顺利，应该会定义出如下所示的类型。

image.png

希望您能参考GitHub仓库来了解更详细的使用方法。

特点

    • ネストしたクエリを定義できる

 

    • 配列を定義できる

 

    オプショナル型を定義できる (types.optional.integer)

感受

因为看起来相当方便，所以我会试用一段时间。

因此，在完成這個之後，我才了解到有從GraphQL模式生成TypeScript類型定義的工具。。。
其他一些工具還包括Apollo-CLI、graphql-code-generator和graphqlgen。

可能会出现需要更新架构、必须定义所需列等问题（大概）。但也许那边更确保和好。已经完成了。

谢谢你

受到启发

    • https://github.com/kadirahq/graphqlify

 

    https://raw.githubusercontent.com/19majkel94/type-graphql

参考文献

    • https://qiita.com/hitochan777/items/3390ec6a66098bfb552f

 

    https://qiita.com/mizchi/items/82138e98bccab60aeaac
bannerAds