从 TypeScript 类型定义或 GraphQL 片段定义生成 JavaScript 空对象

ajn*_*ral 8 javascript typescript graphql react-apollo

我在一个带有 Apollo 客户端的项目中使用 GraphQL,当我使用时,writeFragment我必须将对象形状与片段定义相匹配。我现在正在手动执行此操作,但这会导致大量不必要的代码,并在片段定义更改时使事情变得脆弱。

我想从gql片段生成一个空的 JavaScript 对象。例如

export const instructorFragment = gql`
  fragment InstructorDetails on InstructorProfile {
    id
    user_id
    picture_url
    title
    bio

    tags {
      ...TagDetails
    }
  }
  ${tagFragment}
`;

export const tagFragment = gql`
  fragment TagDetails on Tag {
    id
    label
  }
`;
Run Code Online (Sandbox Code Playgroud)

应该生成类似的东西:

{
    id: null,
    user_id: null,
    picture_url: null,
    title: null,
    bio: null,
    tags: {
        id: null,
        label: null
    }
}
Run Code Online (Sandbox Code Playgroud)

片段对象有足够的信息来做到这一点,但尽管谷歌搜索了很多,我还是没能找到一个库。

  • 选项 1 是使用已经存在的东西
  • 选项 2 是编写我自己的函数
  • 选项 3 是:

我正在使用GraphQL 代码生成器从我的代码中生成 TypeScript 定义,所以我有这样的代码:

export type InstructorProfile = {
  __typename?: 'InstructorProfile';
  id: Scalars['ID'];
  user_id?: Maybe<Scalars['ID']>;
  picture_url?: Maybe<Scalars['String']>;
  title?: Maybe<Scalars['String']>;
  bio?: Maybe<Scalars['String']>;
  tags?: Maybe<Array<Maybe<Tag>>>;
};

export type Tag = {
  __typename?: 'Tag';
  id: Scalars['ID'];
  label: Scalars['String'];
};
Run Code Online (Sandbox Code Playgroud)

有没有办法把它变成我想要的?

Dav*_*haw 0

上面列出的用于生成类型定义的工具在 it\xe2\x80\x99s 网站上有以下说明。

\n
\n

GraphQL Codegen 的目标之一是允许您轻松自定义输出,并根据您的需求添加自定义行为。

\n
\n

因此,应该可以编写一个自定义插件来完成您的任务,这里\xe2\x80\x99s是插件开发入门的链接。

\n

https://graphql-code-generator.com/docs/custom-codegen/write-your-plugin

\n