React - Apollo, 개체를 쿼리에 넣는 방법?

Question

검색 기능을 사용하고 있습니다. 입력 변화에 대한 몇 가지 물건을 일이 내가 배열의 배열을 얻을 : pages level 1 [1,17] pages level 2 [15] pages level 3 [16]

내가 원하는 것은 그 배열에서 페이지의 특정 개체 (이 문제가되지 않습니다) 만들고 이렇게 될 아폴로 쿼리에 넣어하는 것입니다 :

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 
      } 
      } 
     } 
     } 
    } 
    } 
} 
} 

그리고 이것은 내가 붙어있는 곳입니다! 이 페이지 트리가 얼마나 깊은 지 모르기 때문에 순수한 아폴로 변수를 사용할 수 없습니다. 또한 아폴로가 쿼리 내에서 루프를 수행하지 못하게한다고 생각합니다.

내 구성 요소 안에이 개체를 만들어야한다고 생각합니다. Redux 저장소에도 저장할 수 있기 때문입니다.

나는 그런 일을했다 :

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

     ${thePages} 
    } 
    } 
} 

곳 thePages - 내 구성 요소 클래스의 (내가 필요한 객체 나 문자열을 만들거야) 정적 메소드의 결과. 하지만이 경우에는 또 다른 문제가 있습니다. 아폴로는 내 정적 내부의 변경 사항을보고 싶지 않습니다. 쿼리가 클래스 외부에 있기 때문입니다.

또한이 논리를 별도의 구성 요소로 가져 와서 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); 

, 일부 복잡한 물건을 구축하고 쿼리에 전달하는 것이 가능하다. 물론 함수에 정의 된이 쿼리를 래핑하여 일부 이벤트 (예 : 이벤트)에 위임 할 수 있습니다. 딸깍 하는 소리.

코딩을 즐기십시오.)