Relay Modern; Supports not supplied

Question

I get the data returned from my server correctly, but I get an error message that is not supplied.

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

With the following.

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

I see that the data is being retrieved from the server.

And I have other components following similar patterns that work: / This is the ContactsPage component

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

I managed to fix this by changing the sub-root request under the request {} as follows

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

I needed to upgrade my graphql server to nest the node query at the same depth level (I thought it was not required in Relay Modern. But it seems to be so. Perhaps this restriction using the Found. M routing library is not sure.

Answer 2

, Relay Modern.

, , . , .

query, Route, - "QueryRenderer" - https://facebook.imtqy.com/relay/docs/query-renderer.html

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

, , .

- , - https://facebook.imtqy.com/relay/docs/fragment-container.html

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

, , "refetch". , , graphQL , , https://facebook.imtqy.com/relay/docs/refetch-container.html

, .