Use Relay’s Input Object Mutations

Share this video with your friends

Send Tweet

In order to support mutations in Relay, there is a requirement that the GraphQL Server exposes mutation fields in a standardized way. This standard includes a way for mutations to accept and emit an identifier string, allowing Relay to track mutations and responses. In this video, we’ll learn how to use a helper available to us through graphql-relay to create Mutation fields that accept clientMutationId’s.

Austin Witherow
Austin Witherow
~ 8 years ago

Just finished this course. Thank you very much for the overview of GraphQL and Relay :)

A few things that I am wondering now that I am done...

  1. What sort of "folder structure" is effective for GraphQL/Relay architecture?
  2. Can I simply start using graphql-relay to begin rendering my data into a React/RN application?
  3. Is there a recommended method to test my relay architecture? It seems like the foundation of using schemas really does this to begin with, but you know how engineers like to make sure there are no possible leaks :)
Josh Black
Josh Black(instructor)
~ 8 years ago

Hi Austin! So glad to hear that you finished! I hope it was useful.

To answer some of your questions:

What sort of "folder structure" is effective for GraphQL/Relay architecture?

The best part of this is that your folder structure can vary depending on your needs, and if you're adding to an existing Node.js-based server, or starting from fresh. The pattern that I typically use is as follows:

src
├── index.js
├── loaders
│   ├── company.js
│   ├── employees.js
│   ├── index.js
└── schema
    ├── index.js
    ├── middleware
    │   ├── compose.js
    │   ├── index.js
    │   ├── logger.js
    │   ├── profile.js
    │   └── utilities
    │       └── trace.js
    ├── types
    │   ├── company.js
    │   ├── competitors.js
    │   ├── employee.js
    │   ├── node.js

Where schema holds all the information for the GraphQL Schema, including types, mutations, subscriptions, fields, etc. If you're interested in monitoring/profiling your resolve statements, it's also helpful to implement some form of middleware pattern on your resolve statements, for actions like logging, profiling, permissions checking, etc.

In addition, I leverage a project called DataLoader from Facebook for defining how to actually resolve each field. Typically, I locate all of the loaders that I've defined then in their own folder.

Can I simply start using graphql-relay to begin rendering my data into a React/RN application?

On the server-side, that's definitely all you need! For your React applications, it's helpful to use the client version of Relay called react-relay which provides helpful utilities for defining the queries that each component needs satisfied in order to render.

Is there a recommended method to test my relay architecture?

That's a great question, especially when it comes to testing out mutations. Unfortunately, since GraphQL can sit in a variety of places in your stack it makes recommendations challenging.

After going through some projects now with GraphQL, integration tests can definitely be some of the more valuable tests that you can write to verify that your server is behaving the way that you expect it to. For example, when writing Mutations you might want to verify the behavior of your system when the client sends bad/no arguments, or what to do if internal errors occur.

Hope the above answers help, and thanks again for watching the course!

Erkan Buelbuel
Erkan Buelbuel
~ 8 years ago

One of the best Egghead videos, great work, thank you. The clear pronunciation and the fast typing of repetitive source code make this video really appreciative (I hope, that's the correct translation of "genüsslich" from German).

Using GraphQL on production servers (security & co) would be a fantastic addition,..

Josh Black
Josh Black(instructor)
~ 8 years ago

Hi EBIA! Just wanted to say thank you for watching, and thank you so much for the kind words! I'm glad it was helpful 😄

Definitely agree on the topic suggestion, we'll see what we can do!

mobility-team
mobility-team
~ 8 years ago

Thank you so much for this great course! I've read a book on Relay and GraphQL, but this series of videos let you up and running for a day! I see you pass a clientMutationId in the input variable, but it isn't defined in the inputFields. What's the purpose of this one? I can execute the mutation without it... If I execute the mutation with the clientMutationId being equal to another node id, a node will be added and not updated. I don't get the purpose of this parameter.

Chris
Chris
~ 8 years ago

Nice course, but it requires prior understanding of the ideas behind GraphQL and the terminology used in GraphQL and Relay (plus some knowledge of ES 6). These requirements should have been mentioned at the beginning, or you should have added a quick introduction or reminder about these concepts to make it useful to newcomers.

Christopher Lee
Christopher Lee
~ 7 years ago

Note that if you want to use the output fields for optimistic updates with Apollo or Relay, you're probably going to want to return a type of edge instead of videoType. Check this gist for an example.

Aminu Ibrahim Abubakar
Aminu Ibrahim Abubakar
~ 6 years ago

Just finished the course, and it was soooooo great!!! Thanks Josh!! Please is there any demo app you built with GraphQL to share with us??

Tony Catalfo
Tony Catalfo
~ 6 years ago

How do we represent an array or list in the arrow tool?

Eleonora Lester
Eleonora Lester
~ 5 years ago

Thanks Josh, you are an AWESOME instructor. This was a great course, really enjoyed it. The only thing I would have liked is to have more introduction to Relay, what it is and why we use it, but of course... google.

Pablo Jose
Pablo Jose
~ 5 years ago

Excellent Course, thanks for share your skills, I was implement neo4j with your course and works very good... thank you teacher!