Как включить переменные в запрос React Apollo и выполнить его? - PullRequest
Новая
       9

Как включить переменные в запрос React Apollo и выполнить его?

0 голосов
/ 23 октября 2019

Я использую compose для выполнения нескольких запросов в компоненте. Я хочу иметь возможность использовать переменные для запросов.

1) Как включить переменные в запрос?

2) Как выполнить запрос?

Ниже приведен компонент: 

import React from 'react'
import {
    View,
} from 'react-native'
import { graphql, withApollo } from 'react-apollo'
import { compose } from "recompose";

import { GET_ITEM, GET_REVIEWS } from '../graphql/query'

const PostingDetail = props => {
    const itemId = props.navigation.getParam('itemId', null)

    console.log("props", props.itemQuery)

    return (
        <View>
        </View>
    )
}


export default compose(
    withApollo,
    graphql(GET_ITEM, { 
        name: 'itemQuery',
        options: ({ itemId }) => ({
            variables: {
                id: itemId
            }
        })
    }), 
    graphql(GET_REVIEWS, { name: 'reviewsQuery'}), 
)(PostingDetail)

Я хочу иметь возможность использовать itemId в качестве переменных для запроса, однако приведенный выше код отображает следующую ошибку:

"message": "Переменная \" $ id \"требуемого типа \" ID! \ "не было предоставлено."

1 Ответ

0 голосов
/ 23 октября 2019

Это свойство позволяет вам настроить имя опоры, которая передается вашему компоненту. По умолчанию, если документ GraphQL, который вы передаете в graphql(), является запросом, тогда ваш реквизит будет назван data. Если вы пройдете мутацию, ваша опора будет названа mutate. При необходимости эти имена по умолчанию конфликтуют, когда вы пытаетесь использовать несколько запросов или мутаций с одним и тем же компонентом. Чтобы избежать коллизий, вы можете использовать config.name для предоставления реквизита от каждого query или mutation HOC нового имени.

Пример 

export default compose(
  graphql(gql`mutation (...) { ... }`, { name: 'createTodo' }),
  graphql(gql`mutation (...) { ... }`, { name: 'updateTodo' }),
  graphql(gql`mutation (...) { ... }`, { name: 'deleteTodo' }),
)(MyComponent);

function MyComponent(props) {
  // Instead of the default prop name, `mutate`,
  // we have three different prop names.
  console.log(props.createTodo);
  console.log(props.updateTodo);
  console.log(props.deleteTodo);

  return null;
}

Иключ переменной, которую вы хотите использовать, отсутствует в операторе запроса, показывая сообщение об ошибке.

используйте переменные параметров 

export default graphql(gql`
  query ($width: Int!, $height: Int!) {
    ...
  }
`, {
  options: (props) => ({
    variables: {
      width: props.size,
      height: props.size,
    },
  }),
})(MyComponent);
...