Relay Moderne, prop non fourni

Question

Je reçois des données renvoyées par mon serveur correctement, mais je reçois un accessoire non fourni erreur.

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

Avec ce qui suit.

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 
     } 
     `} 
    /> 
); 

Je peux voir que les données sont extraites du serveur.

Et j'ai d'autres composants en fonction des modèles similaires qui fonctionnent:/ C'est le composant ContactsPage

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

j'ai pu corriger cela en changeant l'imbrication de la requête racine sous requête {} comme si

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

J'avais besoin de mettre à jour mon serveur graphql pour imbriquer le nœud de requête d'un niveau de profondeur (I mille ght ce n'était pas nécessaire dans Relay Modern. Mais cela semble être le cas. Peut-être que c'est une contrainte de la bibliothèque de routage Found. Je ne suis pas sûr.

Answer 2

Je pense que vous confondez deux aspects différents de Relay Modern.

J'ai mis à jour votre code avec ce que nous utilisons comme nom de notre type de racine afin que vous puissiez voir plus clairement la différence. Naturellement, vous pouvez l'appeler comme vous voulez.

Le query que vous définissez dans votre classe Route est un « 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 
    } 
    } 
`} 

Vous pouvez avoir plus d'un d'entre eux si vous avez plus d'un itinéraire, il n'est pas recommandé nid celles-ci.

Cependant, le fragment dans votre conteneur est où vous définissez votre dépendance de données à graphql - 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 
      } 
     } 
    ` 
    } 
) 

Notez que vous pouvez ajouter la requête à votre déclaration de conteneur si vous créez un conteneur « de REFETCH ». Par exemple, si vous avez une liste qui est filtrée dans votre résolution graphQLQL selon un argument que vous passez - https://facebook.github.io/relay/docs/refetch-container.html

Espérons que cela aide à dissiper toute confusion.