首页 > 解决方案 > 在 React Apollo 中动态选择查询变量

问题描述

我希望能够动态选择我在 GraphQL 中使用的查询变量。

例如,需要三个单独的查询似乎有点多余:

const getAllStops = gql`
  query trafficStops {
    trafficStops {
      id
      date
    }
  }
`

const getStopsAfter = gql`
  query trafficStops($after: String!) {
    trafficStops(after: $after) {
      id
      date
    }
  }
`
const getStopsBefore = gql`
  query trafficStops($before: String!) {
    trafficStops(before: $before) {
      id
      date
    }
  }
`

有没有一种方法可以让我不仅传递变量before,或者after我是否想将一个、另一个、不使用或两者都使用到单个查询中,而不是使用多个查询?

标签: graphqlreact-apollo

解决方案


是的,你只需要让你的论点成为可选的。感叹号 atString!要求参数是字符串而不是空值。因此,通过删除它,您可以将单个查询编写为

const getAllStops = gql`
  query trafficStops($after: String, $before: String)  {
    trafficStops(after: $after, before: $before) {
      id
      date
    }
  }
`

推荐阅读