如何使用 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;

}