This document discusses the modern architecture and workflow of Relay, a JavaScript library for building data-driven React applications. It covers key concepts like fragment containers, query renderers, and mutations. Fragment containers define how to map data from a GraphQL query to a component's props. Query renderers send GraphQL queries to fetch data and distribute it to fragment containers. Mutations allow components to update data via commitMutation, which sends mutation queries to the server and updates the local Relay store.

1. RELAY
MODERN ARCHITECTURE
& WORKFLOW

2. @alexedev
Alex
Alexeev

3. @alexedev
Alex
Alexeev
React

4. @alexedev
Alex
Alexeev
React / GraphQL

5. @alexedev
Alex
Alexeev
React / GraphQL / Relay

7. 👶 👶
👩

8. Fragment
Containers
👩
👶
👧
👶
👦
Query
Renderer
C1
C2
C3 C4

9. Fragment
Containers
👩
👶
👧
👶
👦
Query
Renderer
C1
C2
C3 C4

10. Fragment
Containers
👩
👶
👧
👶
Query
Renderer
props props
propsprops
👦 C1
C2
C3 C4

11. Component
+
data requirements
FRAGMENT
CONTAINER
👦

12. 👦
TicketPrice.js

13. import { createFragmentContainer, graphql } from 'react-relay';
👦
TicketPrice.js

14. import { createFragmentContainer, graphql } from 'react-relay';
const TicketPrice = props =>
<span>{props.data.price.usd}</span>;
👦
TicketPrice.js

15. import { createFragmentContainer, graphql } from 'react-relay';
const TicketPrice = props =>
<span>{props.data.price.usd}</span>;
const query = graphql`
fragment TicketPriceFragment on FlightType {
price {
eur
usd
}
}
`;
👦
TicketPrice.js

16. import { createFragmentContainer, graphql } from 'react-relay';
const TicketPrice = props =>
<span>{props.data.price.usd}</span>;
const query = graphql`
fragment TicketPriceFragment on FlightType {
price {
eur
usd
}
}
`;
export default createFragmentContainer(TicketPrice, query);
👦
TicketPrice.js

17. Fragment
Containers
👩
👶
👧
👶
👦
Query
Renderer
C1
C2
C3 C4

18. Fragment
Containers
👩
👶
👧
👶
Query
Renderer
props props
propsprops
👦 C1
C2
C3 C4

19. QUERY
RENDERER
👩
Root of Relay tree
Distributes data to
Gathers data requirements from 👦
Sends the query to server
👦

20. import { QueryRenderer, graphql } from 'react-relay';
👩
Flights.js

21. import { QueryRenderer, graphql } from 'react-relay';
import TicketPrice from './TicketPrice';
👩
Flights.js

22. import { QueryRenderer, graphql } from 'react-relay';
import TicketPrice from './TicketPrice';
const query = graphql`
query FlightsQuery($city: String) {
flights(from: $city) {
id
destination
}
}
`;
👩
Flights.js

23. import { QueryRenderer, graphql } from 'react-relay';
import TicketPrice from './TicketPrice';
const query = graphql`
query FlightsQuery($city: String) {
flights(from: $city) {
id
destination
}
}
`;
👩
Flights.js

24. import { QueryRenderer, graphql } from 'react-relay';
import TicketPrice from './TicketPrice';
const query = graphql`
query FlightsQuery($city: String) {
flights(from: $city) {
id
destination
...TicketPriceFragment
}
}
`;
👩
Flights.js

25. import { QueryRenderer, graphql } from 'react-relay';
import TicketPrice from './TicketPrice';
const Flights = () => (
<QueryRenderer
environment={environment}
query={query}
variables={{ from: 'Barcelona' }}
render={({ error, props }) =>
props.flights.map(flight => (
<div key={flight.id}>
To: {flight.destination}
<TicketPrice data={flight} />
</div>
))
}
/>
);
👩
Flights.js
const query = graphql`
query FlightsQuery($city: String) {
flights(from: $city) {
id
destination
...TicketPriceFragment
}
}
`;

26. REFETCH
CONTAINER
♻

27. PAGINATION
CONTAINER
📑

28. UPDATE
CREATE
DELETE
MUTATIONS
💉
KEEP
CALM
AND

29. MUTATIONS
import { commitMutation, graphql } from 'react-relay';

30. import { commitMutation, graphql } from 'react-relay';
const mutation = graphql`
mutation ChangePriceMutation($id: ID!, $priceUsd: Int) {
changePrice(id: $id, price: $priceUsd) {
flight {
id
price {
usd
eur
}
}
}
}
`;
MUTATIONS

31. MUTATIONS
import { commitMutation, graphql } from 'react-relay';
const mutation = graphql`
mutation ChangePriceMutation($id: ID!, $priceUsd: Int) {
changePrice(id: $id, price: $priceUsd) {
flight {
id
price {
usd
eur
}
}
}
}
`;

32. function sellItem(environment, id, priceUsd) {
const variables = {
id,
priceUsd,
};
commitMutation(
environment,
{
mutation,
variables,
// configs,
// updater,
onCompleted: (res, err) => console.log(res),
onError: err => console.error(err),
},
);
}
MUTATIONS

33. function sellItem(environment, id, priceUsd) {
const variables = {
id,
priceUsd,
};
commitMutation(
environment,
{
mutation,
variables,
// configs,
// updater,
onCompleted: (res, err) => console.log(res),
onError: err => console.error(err),
},
);
}
MUTATIONS

34. function sellItem(environment, id, priceUsd) {
const variables = {
id,
priceUsd,
};
commitMutation(
environment,
{
mutation,
variables,
// configs,
// updater,
onCompleted: (res, err) => console.log(res),
onError: err => console.error(err),
},
);
}
MUTATIONS

35. function sellItem(environment, id, priceUsd) {
const variables = {
id,
priceUsd,
};
commitMutation(
environment,
{
mutation,
variables,
// configs,
// updater,
onCompleted: (res, err) => console.log(res),
onError: err => console.error(err),
},
);
}
MUTATIONS

36. function sellItem(environment, id, priceUsd) {
const variables = {
id,
priceUsd,
};
commitMutation(
environment,
{
mutation,
variables,
// configs,
// updater,
onCompleted: (res, err) => console.log(res),
onError: err => console.error(err),
},
);
}
MUTATIONS

37. MUTATION
CONFIGS
NODE_DELETE
RANGE_ADD
RANGE_DELETE
const configs = [{
type: 'NODE_DELETE',
deletedIDFieldName: 'id',
}]
🚀

38. function sellItem(environment, id, priceUsd) {
const variables = {
id,
priceUsd,
};
commitMutation(
environment,
{
mutation,
variables,
// configs,
// updater,
onCompleted: (res, err) => console.log(res),
onError: err => console.error(err),
},
);
}
MUTATIONS

39. MUTATIONS
import { commitMutation, graphql } from 'react-relay';
const mutation = graphql`
mutation ChangePriceMutation($id: ID!, $priceUsd: Int) {
changePrice(id: $id, price: $priceUsd) {
flight {
id
price {
usd
eur
}
}
}
}
`;

40. UPDATE STORE
BY HAND 🛠
function sellItem() {
commitMutation({
//…
updater: store => {
const resItem = store
.getRootField('changePrice')
.getLinkedRecord('flight');
const newPrice = resItem.getValue('price');
const item = store.get(id);
item.setValue(newPrice, 'price');
},
});
}

41. UPDATE STORE
BY HAND 🛠
function sellItem() {
commitMutation({
//…
updater: store => {
const resItem = store
.getRootField('changePrice')
.getLinkedRecord('flight');
const newPrice = resItem.getValue('price');
const item = store.get(id);
item.setValue(newPrice, 'price');
},
});
}

42. UPDATE STORE
BY HAND 🛠
function sellItem() {
commitMutation({
//…
updater: store => {
const resItem = store
.getRootField('changePrice')
.getLinkedRecord('flight');
const newPrice = resItem.getValue('price');
const item = store.get(id);
item.setValue(newPrice, 'price');
},
});
}

43. UPDATE STORE
BY HAND 🛠
function sellItem() {
commitMutation({
//…
updater: store => {
const resItem = store
.getRootField('changePrice')
.getLinkedRecord('flight');
const newPrice = resItem.getValue('price');
const item = store.get(id);
item.setValue(newPrice, 'price');
},
});
}

44. UPDATE STORE
BY HAND 🛠
function sellItem() {
commitMutation({
//…
updater: store => {
const resItem = store
.getRootField('changePrice')
.getLinkedRecord('flight');
const newPrice = resItem.getValue('price');
const item = store.get(id);
item.setValue(newPrice, 'price');
},
});
}

45. UPDATE STORE
BY HAND 🛠
function sellItem() {
commitMutation({
//…
updater: store => {
const resItem = store
.getRootField('changePrice')
.getLinkedRecord('flight');
const newPrice = resItem.getValue('price');
const item = store.get(id);
item.setValue(newPrice, 'price');
},
});
}

46. UPDATE STORE
BY HAND 🛠
function sellItem() {
commitMutation({
//…
updater: store => {
const resItem = store
.getRootField('changePrice')
.getLinkedRecord('flight');
const newPrice = resItem.getValue('price');
const item = store.get(id);
item.setValue(newPrice, 'price');
},
});
}

47. SUBSCRIPTIONS
Allow to implement real time updates:
notifications, messages…
1. Implement on server side first
via WebSockets (AWS AppSync for scalability)
2. Use Relay API similar to mutations (requestSubscription)
📨

48. CHROME EXTENSION

49. CHROME EXTENSION

50. Q & A
🤓

51. SEE YA!
🙂