Relay Modern, prop not supplied

user_151461 0
Viewed 496

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.

server response

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
          }
      }
    `
  }
)
relaymodern relayjs reactjs javascript
2 Answers

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.

user_60607740
Related