Relay Modern, prop not supplied

Question

I'm getting data returned from my server correctly, but I'm getting a prop not supplied error.

~ 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 can see that data is fetched 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 was able to fix this by changing nesting the root query under query { } like so

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

I needed to update my graphql server to nest the query node one level deep ( I thought this wasn't required in Relay Modern. But seems it is. Maybe this is a constraint by the Found routing library. I'm not sure.

Answer 2

I think you are conflating two different aspects of Relay Modern.

I have updated your code with what we use as the name of our root type so you can more clearly see the difference. Naturally you can call it whatever you like.

The query that you define in your Route class is a "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
    }
  }
`}

You may have more than one of these if you have more than one route, it is not recommended that you nest these.

However the fragment in your Container is where you define your data dependency to 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
          }
      }
    `
  }
)

Note that you can add the query to your container declaration if you are creating a "refetch" container. For example if you have a list that is filtered in your graphQL resolve according to some argument you pass in - https://facebook.github.io/relay/docs/refetch-container.html

Hope this helps clear up any confusion.