Taming the beast - how to tame React & GraphQL, one error at a time

Taming
The Beast
How to tame React
& GraphQL
^(One error at a time)
Susanna Wong
@studioswong

Meet Cerberus. Cerberus kept perpetual watch at the
gates, preventing the living from
entering and the dead from leaving.

Step 1:
Setting up the
Query
query ($topics: String $offset: Int) {
Ceberus(
section: "most-popular"
rows: 4
start: $offset
type: "gallery"
topicLabel: $topics
) {
results
docs {
... on popularGallery {
title
type
topics {
label
}
imageLink
}
}
}
}
Query.gql

Step 2:
Exporting the
query and
importing into
React Component
graphql/index.js
component/index.js
export galleryQuery from './Query.gql';
import { galleryQuery } from './graphql';

Step 3:
Construct
functions for
fetching Query
within component
component/index.js
async fetchQuery(client, query, topics, offset)
{
const data = await client.query({
query,
variables: {
topics: topics.join(';'),
offset
}
});
return data
}
async fetchData() {
const { client, topics } = this.props;
const galleries = await this.fetchQuery(
client, galleryQuery, topics, galleryStart);
… // stuff that processes the galleries data
this.setState({
// update state with latest data});
}

Ceberus(
rows: 4
start: $offset
type: "gallery"
topicLabel: $topics
) {
results
docs {
title
type
topics {
label
}
imageLink
}
}
}
}
Query.gql graphql/index.js
component/index.js
async fetchQuery(client, query, topics, offset) {
query,
variables: {
offset
}
});
return data
}
async fetchData() {
this.setState({
}

Ceberus(
rows: 4
start: $offset
type: "gallery"
topicLabel: $topics
) {
results
docs {
title
type
topics {
label
}
imageLink
}
}
}
}
component/index.js
async fetchQuery(client, query, topics, diff) {
query,
variables: {
diff
}
});
return data
}
async fetchData() {
this.setState({
}

query ($topics: String $diff: Int) {
Ceberus(
rows: 4
start: $diff
type: "gallery"
topicLabel: $topics
) {
results
docs {
title
type
topics {
label
}
imageLink
}
}
}
}
component/index.js
query,
variables: {
diff
}
});
return data
}
async fetchData() {
this.setState({
}
Solution 1:
Refactor the variable name across the
query and react files

Ceberus(
rows: 4
start: $offset
type: "gallery"
topicLabel: $topics
) {
results
docs {
title
type
topics {
label
}
imageLink
}
}
}
}
component/index.js
query,
variables: {
offset: diff
}
});
return data
}
async fetchData() {
this.setState({
}
Solution 2:
Expand your JSON object

render() {
…
return (
<div className={styles.component}>
<div className={styles.overallContainer}>
{this.renderElements()}</div>
<Button onClick={this.handleLoadMore()} className={styles.moreButton}>
Show me more!
</Button>
</div>
);
}
handleLoadMore() {
this.fetchData();
}
async fetchData() {
const { client } = this.props;
const data = await this.fetchQuery(client, query);
const { elements } = this.processitems(data);
this.setState({
elements,
loading: false
});
}
Spot the error!
Hint: it still renders…

this.handleLoadMore()}
fetchData()
setState()
Render()

render() {
…
return (
<Button onClick={() => this.handleLoadMore()} className={styles.moreButton}>
Show me more!
</Button>
</div>
);
}
handleLoadMore() {
this.fetchData();
}
async fetchData() {
const { client } = this.props;
const data = await this.fetchQuery(client, query);
const { elements } = this.processitems(data);
this.setState({
elements,
loading: false
});
}
Solution 1:
Arrow Funtction in
render

render() {
…
return (
<Button onClick={this.handleLoadMore} className={styles.moreButton}>
Show me more!
</Button>
</div>
);
}
handleLoadMore() {
this.fetchData();
}
Solution 2:
Bind in Constructor!
constructor(props) {
super(props);
this.state = {
elements: [],
};
this.handleLoadMore = this.handleLoadMore.bind(this);
}

render() {
…
return (
<Button onClick={this.handleLoadMore} className={styles.moreButton}>
Show me more!
</Button>
</div>
);
}
handleLoadMore = () => this.fetchData(); Solution 3:
Class properties
(note: React does not recommend this
though…)
constructor(props) {
super(props);
this.state = {
elements: [],
};
this.handleLoadMore = this.handleLoadMore.bind(this);
}
Binding in constructor is no more needed!

Spot the error!
Hint: You might want to debug with an IDE
debugger…..
componentWillReceiveProps({ attr }) {
const isPathChanged = attr.pathname !== this.props.location.pathname;
const isQueryChanged = attr.search !== this.props.location.search;
if (this.isMenuVisible && (isPathChanged || isQueryChanged)) {
this.toggleMenu();
}
this.processQueryString(attr.search);
}
setBody(qs) {
const setScroll = qs.has('menu') || qs.has('gallery');
if (setScroll) {
if (this.scrollTop === null) {
this.scrollTop = window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
}
} else if (this.scrollTop !== null) {
this.restoreScrollPosition(this.scrollTop);
this.scrollTop = null;
}
}
processQueryString(search) {
const qs = new URLSearchParams(search);
this.setBody(qs);
}
render() {
<Header toggleMenu={this.toggleMenu}. menuVisible={this.isMenuVisible}/>
}
toggleMenu() {
if (this.isMenuVisible) {
this.setState({ menuVisible: false });} else {this.setState({ menuVisible: true});
}
}
Answers on my
twitter:
@studioswong

Taming the beast - how to tame React & GraphQL, one error at a time

Recommended

More Related Content

What's hot (20)

Similar to Taming the beast - how to tame React & GraphQL, one error at a time (20)

Recently uploaded (20)

Taming the beast - how to tame React & GraphQL, one error at a time