First query operation with Relay

Our GraphQL fragments are ready to be hooked into Relay! All we need to do now is define them in the new Relay containers with which we wrapped our React components in the previous chapter.

Starting with the Quote component, we can tell Relay about its data requirements using the fragments property in the createContainer second argument.

Modify the Relay.createContainer call in js/quote.js to the following:

Quote = Relay.createContainer(Quote, { 
  fragments: { 
    quote: () => Relay.QL ` 
      fragment OneQuote on Quote { 
        text 
        author 
      } 
    ` 
  } 
}); 

This fragments property expects an object with one or more fragments; every fragment is represented with a name, which is a key on that object, and a value that is a function which returns ...

Get Learning GraphQL and Relay now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.