Apollo 客户端：如何使用查询字符串查询其余端点？

Question

我正在使用 Apollo 调用从查询字符串中获取变量的休息端点：

/api/GetUserContainers?showActive=true&showSold=true

我无法弄清楚如何将变量传递给查询，以便它可以调用正确的 url。通过查看 apollo-link-rest docs 和一些问题，我认为我应该使用 pathBuilder 但这没有记录，我无法让它工作。

到目前为止，我已经这样定义了我的查询：

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}
`

并在我的组件中这样调用它，这不起作用:

import queryString from 'query-string'

// ...

const { data } = useQuery(getUserContainersQuery, {
  variables: {
    showActive: true,
    showSold: false,
    pathBuilder: () => `/api/GetUserContainers?${queryString.stringify(params)}`,
  },
  fetchPolicy: 'cache-and-network',
})

我让它工作的唯一方法是将完整构建的路径传递给组件的查询：

// 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',
})

在我看来，这些是我想避免的非常棘手的解决方案。

处理此查询字符串问题的推荐方法是什么？

Answer 1

对于简单的查询字符串参数，您不需要使用 pathBuilder。您可以将参数作为变量直接传递给 useQuery，然后使用 {args.somearg} 语法直接传递给 path。我看到的问题是您没有定义您用于查询的变量 containerHistory bu 仅在查询别名 RESTgetUserQueries 中。如果更新应该是这样的：


// 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',
})

Apollo 客户端：如何使用查询字符串查询其余端点？

Apollo Client: How to query rest endpoint with query string?

react-apollo

apollo-client

apollo-link-rest