[英]Apollo Client: How to query rest endpoint with query string?
I'm using Apollo to call a rest endpoint that takes variables from query string:我正在使用 Apollo 调用 rest 端点,该端点从查询字符串中获取变量:
/api/GetUserContainers?showActive=true&showSold=true
I'm having trouble figuring out how to pass variables to the query, so it can then call the correct url. From looking at apollo-link-rest docs and a few issues I think I'm supposed to use pathBuilder
but this is not documented and I haven't been able to get it working.我无法弄清楚如何将变量传递给查询,因此它可以调用正确的 url。通过查看apollo-link-rest 文档和一些问题,我认为我应该使用
pathBuilder
但这不是记录在案,但我无法使其正常工作。
So far I've defined my query like this:到目前为止,我已经这样定义了我的查询:
getUserContainersQuery: gql`
query RESTgetUserContainers($showActive: Boolean, $showSold: Boolean, $pathBuilder: any) {
containerHistory @rest(type: "ContainerHistoryResponse", pathBuilder: $pathBuilder) {
active @type(name: "UserContainer") {
...ContainerFragment
}
sold @type(name: "UserContainer") {
...ContainerFragment
}
}
}
${ContainerFragment}
`
and calling it in my component like this, which does not work :并像这样在我的组件中调用它,这是行不通的:
import queryString from 'query-string'
// ...
const { data } = useQuery(getUserContainersQuery, {
variables: {
showActive: true,
showSold: false,
pathBuilder: () => `/api/GetUserContainers?${queryString.stringify(params)}`,
},
fetchPolicy: 'cache-and-network',
})
The only way I got this to work was by passing the fully constructed path to the query from the component:我让它工作的唯一方法是将完全构建的路径传递给组件的查询:
// query definition
getUserContainersQuery: gql`
query RESTgetUserContainers($pathString: String) {
containerHistory @rest(type: "ContainerHistoryResponse", path: $pathString) { // <-- pass path here, instead of pathBuilder
// same response as above
}
}
`
// component
const params = {
showActive: true,
showSold: false,
}
const { data } = useQuery(getUserContainersQuery, {
variables: {
pathString: `/api/GetUserContainers?${queryString.stringify(params)}`,
},
fetchPolicy: 'cache-and-network',
})
These seems to me like a really hacky solution which I'd like to avoid.在我看来,这些似乎是一个我想避免的非常棘手的解决方案。
What is the recommended way to handle this query string problem?处理此查询字符串问题的推荐方法是什么?
You shouldn't need to use the pathBuilder
for simple query string params.您不需要将
pathBuilder
用于简单的查询字符串参数。 You can pass your params directly as variables to useQuery
then pass then directly into teh path
using the {args.somearg}
syntax.您可以将参数直接作为变量传递给
useQuery
,然后使用{args.somearg}
语法直接传递到path
中。 The issue I see is you've not defined the variables your using for you query containerHistory
bu only in the query alias RESTgetUserQueries
.我看到的问题是您没有定义您用于查询
containerHistory
的变量,仅在查询别名RESTgetUserQueries
中定义。 If updated is should look like this:如果更新应该是这样的:
// query definition
getUserContainersQuery: gql`
query RESTgetUserContainers($showActive: Boolean, $showSold: Boolean) {
// pass the variables to the query
containerHistory(showActive:$showActive, showSold:$showSold) @rest(type: "ContainerHistoryResponse", path:"/api/GetUserContainers?showActive={args.showActive}&showSold={args.showTrue}") {
//.. some expected reponse
}
}
`
// component
const params = {
showActive: true,
showSold: false,
}
const { data } = useQuery(getUserContainersQuery, {
variables: {
showActive,
showSold
},
fetchPolicy: 'cache-and-network',
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.