[英]Apollo GraphQL resolvers how to pass arguments to query child type
I have a Query that takes an argument with child type which also takes an argument.我有一个带有子类型参数的查询,它也带有一个参数。 I would like to pass arguments on both the query and the query child type.
我想在查询和查询子类型上传递参数。 I need help on how to implement this logic.
我需要有关如何实现此逻辑的帮助。
When I hard code the "after" variable the app works fine.当我对“after”变量进行硬编码时,应用程序运行良好。 How do I implement the resolver to get the after variable from the front-end and then pass is to playerInFoAPI in the dataSources?
如何实现解析器以从前端获取 after 变量,然后将其传递给数据源中的 playerInFoAPI?
SCHEMA架构
const { gql } = require("apollo-server-express");
const typeDefs = gql`
scalar Date
type Query {
text: String!
club(slug: String!): Club!
}
type Club {
id: ID!
name: String!
pictureSecondaryUrl: String
domesticLeague: DomesticLeague
players(first: Int, after: String): PlayerConnection!
}
type PlayerConnection {
edges: [playerEdge!]!
nodes: [Player!]!
pageInfo: PageInfo!
}
type PageInfo {
endCursor: String
hasNextPage: Boolean!
hasPreviousPage: Boolean!
startCursor: String
}
type Player {
id: ID!
displayName: String!
slug: String!
age: Int!
birthDate: Date
position: String!
country: Country!
subscriptionsCount: Int!
pictureUrl: String
shirtNumber: Int
status: PlayerStatus!
activeClub: Club
allSo5Scores: So5ScoreConnection!
}
type playerEdge {
cursor: String!
node: Player
}
type Country {
code: String!
}
type PlayerStatus {
id: ID!
lastFifteenSo5Appearances: Int
lastFifteenSo5AverageScore: Float
lastFiveSo5Appearances: Int
lastFiveSo5AverageScore: Float
playingStatus: String
}
type So5ScoreConnection {
nodes: [So5Score!]!
}
type So5Score {
score: Float
}
type DomesticLeague {
id: ID!
displayName: String!
}
`;
module.exports = typeDefs;
GRAPHQL DATA SOURCE WITH QUERY带有查询的 GraphQL 数据源
const { GraphQLDataSource } = require("apollo-datasource-graphql");
const { gql } = require("apollo-server-express");
const PLAYER_INFO = gql`
query PLAYER_INFO($slug: String!, $after: String) {
club(slug: $slug) {
players(first: 2, after: $after) {
pageInfo {
endCursor
hasNextPage
hasPreviousPage
startCursor
}
edges {
# start node
node {
id
displayName
slug
age
birthDate
position
country {
slug
code
}
subscriptionsCount
pictureUrl
shirtNumber
activeClub {
id
name
pictureSecondaryUrl
domesticLeague {
id
displayName
}
}
status {
id
lastFifteenSo5Appearances
lastFifteenSo5AverageScore
lastFiveSo5Appearances
lastFiveSo5AverageScore
playingStatus
}
allSo5Scores {
nodes {
score
}
}
} #end node
}
}
}
}
`;
class PlayerInfoAPI extends GraphQLDataSource {
constructor() {
super();
this.baseURL = "https://api.sorare.com/graphql/";
}
async getPlayerInfo(slug,after) {
try {
const response = await this.query(PLAYER_INFO, {
variables: {
slug,
after
},
});
return this.playerInfoReducer(response.data.club.players);
} catch (err) {
console.log(err);
throw new Error(err.message);
}
}
playerInfoReducer(data) {
return {
players: {
pageInfo: {
endCursor: data.pageInfo.endCursor,
startCursor: data.pageInfo.startCursor,
hasNextPage: data.pageInfo.hasNextPage,
hasPreviousPage: data.pageInfo.hasPreviousPage,
},
},
};
}
}
module.exports = PlayerInfoAPI;
RESOLVER解析器
const dateScalar = require("../Utils/CustomDate");
const resolvers = {
Date: dateScalar,
Query: {
text: () => "Hello There!",
club: (_, { slug }, { dataSources }) =>
dataSources.playerInfoAPI.getPlayerInfo(slug),
},
// Club: {
// players(_, { after }, { dataSources }) {
// return dataSources.playerInfoAPI.getPlayerInfo(after);
// },
// },
};
module.exports = resolvers;
FRONT END WITH FETCHMORE FUNCTION具有 FetchMORE 功能的前端
const SLUG = "slug-example";
const PlayerListTable = () => {
const { data, loading, error, networkStatus, fetchMore } = useQuery(
PLAYERS_INFO,
{
variables: { slug: SLUG, after: null },
notifyOnNetworkStatusChange: true,
}
);
const onLoadMore = () => {
//destructure end cursor
const { endCursor } = data.club.players.pageInfo;
console.log(endCursor);
fetchMore({
variables: {
after: endCursor,
},
updateQuery: (prevResult, { fetchMoreResult }) => {
console.log(fetchMoreResult);
},
});
};
You cannot simply forward args to child resolver as this would collide with child args if any.您不能简单地将 args 转发给子解析器,因为这会与子 args(如果有)发生冲突。 Also the API does not reveal args passed to parent from within a child resolver.
此外,API 不会显示从子解析器中传递给父级的参数。 Remember that first argument of child resolver will always be whatever is returned from parent resolver.
请记住,子解析器的第一个参数将始终是从父解析器返回的任何内容。 This lets you can pass data from parent to child.
这使您可以将数据从父级传递给子级。 This is by design to achieve separation of concerns.
这是为了实现关注点分离而设计的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.