Блог

Я использую Apollo для вызова конечной точки rest, которая принимает переменные из строки запроса:

/api/GetUserContainers?showActive=trueamp;showSold=true

У меня возникли проблемы с пониманием того, как передавать переменные в запрос, чтобы затем он мог вызвать правильный URL. Из просмотра документов apollo-link-rest и нескольких вопросов, которые, я думаю, я должен использовать 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',
})
  

Мне кажется, это действительно хакерское решение, которого я бы хотел избежать.

Каков рекомендуемый способ решения этой проблемы со строкой запроса?

Вам не нужно использовать pathBuilder для простых параметров строки запроса. Вы можете передавать свои параметры непосредственно как переменные useQuery , а затем передавать их непосредственно в teh path , используя {args.somearg} синтаксис. Проблема, которую я вижу, заключается в том, что вы не определили переменные, которые вы используете для запроса 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}amp;showSold={args.showTrue}") { 

     //.. some expected reponse

    }
  }
`

// component

const params = {
  showActive: true,
  showSold: false,
}

const { data } = useQuery(getUserContainersQuery, {
  variables: {
    showActive, 
    showSold
  },
  fetchPolicy: 'cache-and-network',
})