Relay Modern, prop not supplied

Question

내 서버에서 데이터가 올바르게 반환되었지만 제공되지 않는 오류가 발생합니다.

~ expected prop `query` to be supplied to `Relay(ContactsPage)`, but got `undefined`. 

다음과 같습니다.

import makeRouteConfig from 'found/lib/makeRouteConfig'; 
import Route from 'found/lib/Route'; 
import React from 'react'; 
import { graphql } from 'react-relay'; 

import ContactsPage from '../components/ContactsPage'; 

export default makeRouteConfig(
    <Route 
     path="/contacts" 
     Component={ContactsPage} 
     prepareVariables={ (params) => ({ 
     ...params, 
     count: 5, 
     order: "title", 
     postType: ['mp_contact'], 
     })} 
     query={graphql` 
     query contacts_WPQuery_Query(
      $count: Int! 
      $order: String! 
      $cursor: String 
      $categoryName: String 
      $postType: [String] 
     ) { 
      ...ContactsPage_query 
     } 
     `} 
    /> 
); 

데이터가 서버에서 가져온 것을 확인할 수 있습니다.

그리고 작동 유사한 패턴을 다음과 같은 다른 구성 요소가 있습니다/ 이것은 ContactsPage 구성 요소 I 쿼리에서 루트 쿼리를 중첩 변경하여이 문제를 해결할 수 있었다

import React, { Component } from 'react' 
import ContactsList from './ContactsList' 
import { createFragmentContainer, graphql } from 'react-relay' 

class ContactsPage extends Component { 

    render() { 
    const {query} = this.props 
    return (
     <div> 
     <ContactsList wp_query={query.wp_query} /> 
     </div> 
    ) 
    } 
} 

export default createFragmentContainer(
    ContactsPage, 
    { 
    query: graphql` 
     fragment ContactsPage_query on Query { 
      wp_query { 
      id 
      ...ContactsList_wp_query 
      } 
     } 
    ` 
    } 
) 

Answer 1

입니다 {} like so

query={graphql` 
     query contacts_WPQuery_Query(
      $count: Int! 
      $order: String! 
      $cursor: String 
      $categoryName: String 
      $postType: [String] 
     ) { 
      query { 
       ...ContactsPage_query 
      } 
     } 
     `} 

그래프 노드를 한 단계 깊숙이 중첩하도록 업데이트해야했습니다. 이것은 Relay Modern에서 요구되지 않았습니다. 그러나 그것이있는 것처럼 보입니다. 어쩌면 발견 된 라우팅 라이브러리에 의한 제약 일 수 있습니다. 나는 잘 모르겠다.

Answer 2

나는 당신이 Relay Modern의 두 가지 측면을 융합하고 있다고 생각합니다.

코드를 루트 유형의 이름으로 사용하여 코드를 업데이트하여 차이점을 더 명확하게 볼 수 있습니다. 당연히 당신은 당신이 좋아하는대로 부를 수 있습니다. 당신이 당신의 Route 클래스에 정의

query는 "QueryRenderer"입니다 - 두 개 이상의 경로가있는 경우 https://facebook.github.io/relay/docs/query-renderer.html가

graphql` 
    query contactsQuery (
    $count: Int! 
    $order: String! 
    $cursor: String 
    $categoryName: String 
    $postType: [String] 
) { 
    viewer { 
     ...ContactsPage_viewer 
    } 
    } 
`} 

당신은 다음 중 하나 이상을 가질 수있다, 그것은 중첩하지 않는 것이 좋습니다 이들. 당신이 "다시 반입"컨테이너를 작성하는 경우 당신은 당신의 용기 선언에 쿼리를 추가 할 수 있습니다 https://facebook.github.io/relay/docs/fragment-container.html

export default createFragmentContainer(
    ContactsPage, 
    { 
    viewer: graphql` 
     fragment ContactsPage_viewer on Viewer { 
      wp_query { 
      id 
      ...ContactsList_wp_viewer 
      } 
     } 
    ` 
    } 
) 

주 - graphql하는 데이터 의존성을 정의 어디 컨테이너에있는 조각은 그러나

. 예를 들어 graphQL에서 필터링 된 목록을 가지고 있다면 전달할 인수에 따라 해결하십시오. - https://facebook.github.io/relay/docs/refetch-container.html

희망 사항은 혼동을 없애는 데 도움이됩니다.