Question

我正在开发搜索功能。在输入更改发生一些东西，我得到数组的数组： pages level 1 [1,17] pages level 2 [15] pages level 3 [16]

我想要的是从该数组创建特定的页面对象（这不是问题），并将其置于Apollo查询中：

folders(search: [...some conditions]) {
data {
  id
  title

  pages(search: [{field: "id", value: "1"}, {field: "id", value: "17", type: OR}]) {
    data {
      id
      title
      pages(search: [{field: "id", value: "15"}]) {
        data {
          id
          title
          pages(search: [{field: "id", value: "16"}]) {
            data {
              id
              title
            }
          }
        }
      }
    }
  }
}
}

这就是我卡住的地方！我不能使用纯Apollo变量，因为我不知道这个页面树有多深，而且我认为Apollo不允许我在查询中做一些循环。

我认为我必须在我的组件中创建这个对象，因为我还可以将它保存到Redux商店。

我做了类似的事情：

const thePages = SearchInTree.createQueryFragmentWithPages();
const ACCURATE_SEARCH_QUERY = gql`
  query SecondSearch{folders(search: [...some conditions]) {
    data {
      id
      title

      ${thePages}
    }
  }
}

其中thePages - 我的组件类的静态方法（我将创建所需的Object或String）的结果。但是在这种情况下我还有另外一个问题 - Apollo不希望在我的静态内部看到任何变化，因为查询不属于我的类。

此外，我尝试将此逻辑转换为单独的组件，然后从Redux存储中提取数据。但我不知道如何将此组件插入到我的查询中。

我知道我错过了一些东西，也许是另一种方式，我不知道...... 请帮助！

Answer 1

我最后通过使用withApollo HOC解决了这个问题。我给新手做了简短的说明：）

import {compose, gql, withApollo} from 'react-apollo';
...// some imports

class TestClass extends React.Component {
    ...// some code

    let queryString = `folders{data{id, pages}}`;

    this.props.client.query({
      query: gql `query TestQuery{${queryString}}`,
      variables: someVar,

    }).then((data) => {
      console.log('then', data, this.props);
      // here you can also save result to the Redux store

    }).catch((err) => {
      console.log('catch', err)
    });
}
...
export default withApollo(TestClass);

正如您所看到的，可以构建一些复杂的东西并将其传递给查询。当然，您可以将此查询定义在函数中并将其委托给某个事件，例如点击。

享受您的编码;）

React - Apollo，如何将Object放入查询中？

1 个答案: