如何使用 type-graphql 解析器 function 获取后端 graphql 中的选定字段？

Question

我正在编写一个解析器以使用 typescript 和 type-graphql 从 REST api 到 graphql 后端 function 获取数据。我面临的问题是我正在从 API 获取数据，但我只想返回前端的所有属性的选定字段。 如何只返回选定的字段？

这是我的场景。 我有反应应用程序作为前端。 我将在 fr.netend 应用程序中编写所有 graphql 查询。 前端有apollo客户端，后端连接到graphql。 后端是typescript写的node app。我的后端从rest api获取数据，通过apollo server服务到前端。 我们在后端使用 type-graphql

在这个问题中，我对后端有疑问。

我有以下类型（在后端定义为 personInfo.ts）

import { ObjectType, Field } from "type-graphql";

@ObjectType("PersonInfo")
export class PersonInfo {
  @Field({ nullable: true }) firstName: string;
  @Field({ nullable: true }) lastName: string;
  @Field({ nullable: true }) registrationNo: string;
  @Field({ nullable: true }) personCode: string;
  @Field({ nullable: true }) personCapabilities: string;
}

我在我的解析器中使用上面的类型，如下所示：（在后端定义为 personInfoResolver.ts）这个 graphql 解析器将使用下一部分中编写的 function 从 rest api 获取数据。 这个 function 有如下代码所述的问题。

import { Query, Resolver, Arg } from "type-graphql";
import { PersonInfo } from "../types";
import { GetPersonInfo } from "./api/helpers";

@Resolver((of) => PersonInfo)
export class PersonInfoResolver {
  @Query((returns) => PersonInfo, { nullable: true })
  async PersonInfo(@Arg("serialNo") serialNo: string) {
    console.log(await GetPersonInfo(serialNo)); //<--this logs full object received from api with all the fields
    return await GetPersonInfo(serialNo); //when queried from graphql playground, i get null for selected values even if previous line prints all data
  }
}

这是 function 在 api 帮助程序中获取数据（在后端定义为连接到 api 并获取数据。）工作正常并从 rest api 获取所有对象。

export const GetPersonInfo = async (serialNo: string) => {
  var personInfoURL = "url" + serialNo;
  if (!serialNo) {
    return "";
  }
  const response = await posApi
    .get(personInfoURL)
    .then(function (response) {
      return response.data;
    })
    .catch(function (error) {});

  const data = await response;

  return data;
};

我正在使用以下查询使用 graphql 操场测试上面的代码。

  {
    PersonInfo(serialNo:"201123030"){
     firstName
     lastName
     registrationNo
     registrationNo
     personCapabilities

 }
}

Answer 1

我不清楚你的问题，但我会尽力帮助你。

首先，您提供的 GraphQL 架构无效。

在操场上，你应该写：

{
    PersonInfo(serialNo: "201123030") { //not DetailsInfo
        firstName
        ...
    }

}

鉴于您的实体看起来像这样：

@Column()
@Field({ nullable: true }) firstName: string;
@Column()
@Field({ nullable: true }) lastName: string;
@Column()
@Field({ nullable: true }) registrationNo: string;
@Column()
@Field({ nullable: true }) personCode: string;
@Column()
@Field({ nullable: true }) personCapabilities: string;

你的解析器看起来像这样：

@Resolver(PersonInfo)
export class PersonInfoResolver {
  @Query(() => PersonInfo, { nullable: true })
  async PersonInfo(@Arg("serialNo") serialNo: string): Promise<PersonInfo> {
    return await GetPersonInfo(serialNo); //when queried from graphql playground, i get null for selected values even if previous line prints all data
  }
}

我建议跑步

npm i -D @graphql-codegen @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/operations @graphql-codegen/typescript-react-apollo

这允许在您的项目中自动生成模式和类型安全。

在你的反应项目的根目录中创建一个名为codegen.yml的文件（与package.json相同的位置）

overwrite: true
schema: "http://localhost:4000/graphql"
documents: "src/graphql/**/*.graphql"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"

创建在src/*中generated的文件夹。

或者，将上面的结构更改为您希望生成架构的任何位置。

您首先需要在src/graphql/queries/*中创建personinfo.query.graphql

（您也可以在此处创建另一个名为src/graphql/mutations/的文件夹）

personinfo.query.graphql

query PersonInfo($serialNo: String!) { 
     personInfo(serialNo: $serialNo) {
         firstName,
         lastName,
         registrationNo,
         personCode,
         personCapabilities  //or whatever subset of fields you want.
     }
}

在您的控制台类型中： graphql-codegen --config codegen.yml将生成文件。 现在打开graphql.tsx ，看看它创建了什么。 很整洁吧？

然后在你的反应组件中做：

export const MyComponent: React.FC<{}> = ({}) => {

    const [{data}] = usePersonInfoQuery({/*your serialNo here*/}); //this function will have been generated now
    //then you have access to the fields you supplied to `personinfo.query.graphql`
    const fName = data.personInfo.firstName;
    const lName = data.personInfo.lastName;

}