如何在 React Apollo 查询中包含变量并执行它？

Question

我正在使用 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": "Variable \"$id\" of required type \"ID!\" was not provided."

Answer 1

此属性允许您配置传递给组件的 prop 的名称。默认情况下，如果您传递给 graphql() 的 GraphQL 文档是一个查询，那么您的 prop 将被命名为 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;
}

而你要使用的变量的key不在查询语句中，显示错误信息。

使用选项变量

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

如何在 React Apollo 查询中包含变量并执行它？

How to include variables in the React Apollo query and execute it?

reactjs

react-native

graphql

react-apollo