node.js - 如何使用 type-graphql 解析器函数获取 graphql 后端中的选定字段?
问题描述
我正在编写一个解析器,以使用 typescript 和 type-graphql 从 REST api 获取数据到 graphql 后端函数。我面临的问题是我从 API 获取所有道具的数据,但我只想返回前端的选定字段。如何仅返回选定的字段?
这是我的场景。我有反应应用程序作为前端。我将在前端应用程序中编写所有 graphql 查询。前端有一个 apollo 客户端,它连接到后端的 graphql。后端是用打字稿编写的节点应用程序。我的后端从 rest api 获取数据并通过 apollo 服务器提供给前端。我们在后端使用 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 解析器将使用下一部分编写的函数从 rest api 获取数据。该函数存在如下代码中所述的问题。
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
}
}
这是在 api helper 中获取数据的函数(在后端定义以连接到 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
}
}
解决方案
你的问题我不清楚,但我会尽力帮助你。
首先,您提供的 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"
generated
在 中创建文件夹src/*
。
或者,将上面的结构更改为您希望生成模式的任何位置。
您首先需要personinfo.query.graphql
在src/graphql/queries/*
(您也可以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;
}
推荐阅读
- laravel - 后续如何查找和分组条件相同的记录?
- php - login script with php mysql redirecting to login page everytime on server
- networking - 如何禁用所有 systemd 网络配置功能并运行我的网络初始化 shell 脚本?
- java - AWS SDK - purpose of async configuration SdkAdvancedAsyncClientOption.FUTURE_COMPLETION_EXECUTOR
- xcode10 - Cannot open Xcode project after updating to Catalina
- java - Gradle - 即使打包在 jar 中也无法加载 Java 类
- java - 如何使包含在另一个滚动视图中的编辑文本可滚动?
- java - 使用java中的Prepared Statement将用户IP地址插入MySql表
- python - Python list formatting with JSON
- algorithm - 如何优化匹配标准和规模目标的元素选择?