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

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 - 我的组件 class 的静态方法（我将在其中创建所需的对象或字符串）的结果。但在这种情况下，我遇到了另一个问题——Apollo 不想在我的静态文件中看到任何更改，因为查询位于我的 class.

之外

我还尝试将此逻辑取出到单独的组件中，然后从 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，如何将对象放入查询中？

React - Apollo, how to put Object inside the query?

apollo

reactjs

react-apollo