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

グラフノードを更新してクエリノードを1レベル深く入れ替える必要がありましたこれはリレー・モダンでは必須ではありませんでした。しかしそれはそうです。おそらく、これはFoundルーティングライブラリの制約です。よく分かりません。

Answer 2

私はあなたがRelay Modernの2つの異なる側面を融合していると思います。

コードをルートタイプの名前として使用してコードを更新しました。その違いをより明確に確認できます。もちろん、あなたは好きなものを呼び出すことができます。あなたは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

これは混乱を取り除くのに役立ちます。