@samitouri / QOS-React-2 / commits / 1bcd6804f3

Update syntax in older Relay blog post that may be causing confusion

Just seen on Stack Overflow a question that suggests people may be confused if they run across some of the old syntax in one of our old blog posts: http://stackoverflow.com/questions/33261751/why-does-relay-ql-result-in-unterminated-string-constant-error/ Ideally people would consult the (up-to-date) documentation instead, and we don't want to have to maintain old blog posts, but in this case the cost of updating the syntax was low so I just went ahead and did it.

Greg Hurrell committed Oct 21, 2015 at 11:49 UTC 1bcd6804f300953204a2aaa414acf4da511d7fcf
1 file changed +35 -37
docs/_posts/2015-03-19-building-the-facebook-news-feed-with-relay.md
+35 -37
@@ -40,20 +40,18 @@ The first step is a React `<Story>` component that accepts a `story` prop with t
40
41 ```javascript
42 // Story.react.js
43 -class Story extends React.Component {
43 +export default class Story extends React.Component {
44 render() {
45 var story = this.props.story;
46 return (
47 <View>
48 - <Image uri={story.author.profile_picture.uri} />
48 + <Image uri={story.author.profilePicture.uri} />
49 <Text>{story.author.name}</Text>
50 <Text>{story.text}</Text>
51 </View>
52 );
53 }
54 }
55 -
56 -module.exports = Story;
55 ```
56
57 <br/>
@@ -66,41 +64,41 @@ Relay automates the process of fetching data for components by wrapping existing
64 // Story.react.js
65 class Story extends React.Component { ... }
66
69 -module.exports = Relay.createContainer(Story, {
70 - queries: {
67 +export default Relay.createContainer(Story, {
68 + fragments: {
69 story: /* TODO */
70 }
71 });
72 ```
73
76 -Before adding the GraphQL query, let's look at the component hierarchy this creates:
74 +Before adding the GraphQL fragment, let's look at the component hierarchy this creates:
75
76 <img src="/react/img/blog/relay-components/relay-containers.png" width="397" alt="React Container Data Flow" />
77
80 -Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a query is defined. In this case we'll add a GraphQL query for `story`:
78 +Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a fragment is defined. In this case we'll add a GraphQL fragment for `story`:
79
80 ```javascript
81 // Story.react.js
82 class Story extends React.Component { ... }
83
86 -module.exports = Relay.createContainer(Story, {
87 - queries: {
88 - story: graphql`
89 - Story {
84 +export default Relay.createContainer(Story, {
85 + fragments: {
86 + story: () => Relay.QL`
87 + fragment on Story {
88 author {
91 - name,
92 - profile_picture {
89 + name
90 + profilePicture {
91 uri
92 }
95 - },
93 + }
94 text
95 }
98 - `
99 - }
96 + `,
97 + },
98 });
99 ```
100
103 -Queries use ES6 template literals tagged with the `graphql` function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe queries. Note that the query's structure closely matches the object structure that we expected in `<Story>`'s render function.
101 +Queries use ES6 template literals tagged with the `Relay.QL` function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe fragments. Note that the fragment's structure closely matches the object structure that we expected in `<Story>`'s render function.
102
103 <br/>
104
@@ -112,7 +110,7 @@ We can render a Relay component by providing Relay with the component (`<Story>`
110 {
111 author: {
112 name: "Greg",
115 - profile_picture: {
113 + profilePicture: {
114 uri: "https://…"
115 }
116 },
@@ -159,35 +157,35 @@ module.exports = NewsFeed;
157
158 `<NewsFeed>` has two new requirements: it composes `<Story>` and requests more data at runtime.
159
162 -Just as React views can be nested, Relay queries can compose queries from child components. Composition in GraphQL uses ES6 template literal substitution: `${Component.getQuery('prop')}`. Pagination can be accomplished with a query parameter, specified with `<param>` (as in `stories(first: <count>)`):
160 +Just as React views can be nested, Relay components can compose query fragments from child components. Composition in GraphQL uses ES6 template literal substitution: `${Component.getFragment('prop')}`. Pagination can be accomplished with a variable, specified with `$variable` (as in `stories(first: $count)`):
161
162 ```javascript
163 // NewsFeed.react.js
164 class NewsFeed extends React.Component { ... }
165
168 -module.exports = Relay.createContainer(NewsFeed, {
169 - queryParams: {
170 - count: 3 /* default to 3 stories */
166 +export default Relay.createContainer(NewsFeed, {
167 + initialVariables: {
168 + count: 3 /* default to 3 stories */
169 },
172 - queries: {
173 - viewer: graphql`
174 - Viewer {
175 - stories(first: <count>) { /* fetch viewer's stories */
176 - edges { /* traverse the graph */
170 + fragments: {
171 + viewer: () => Relay.QL`
172 + fragment on Viewer {
173 + stories(first: $count) { /* fetch viewer's stories */
174 + edges { /* traverse the graph */
175 node {
178 - ${Story.getQuery('story')} /* compose child query */
176 + ${Story.getFragment('story')} /* compose child fragment */
177 }
178 }
179 }
180 }
183 - `
184 - }
181 + `,
182 + },
183 });
184 ```
185
188 -Whenever `<NewsFeed>` is rendered, Relay will recursively expand all the composed queries and fetch them in a single trip to the server. In this case, the `text` and `author` data will be fetched for each of the 3 story nodes.
186 +Whenever `<NewsFeed>` is rendered, Relay will recursively expand all the composed fragments and fetch the queries in a single trip to the server. In this case, the `text` and `author` data will be fetched for each of the 3 story nodes.
187
190 -Query parameters are available to components as `props.queryParams` and can be modified with `props.setQueryParams(nextParams)`. We can use these to implement pagination:
188 +Query variables are available to components as `props.relay.variables` and can be modified with `props.relay.setVariables(nextVariables)`. We can use these to implement pagination:
189
190 ```javascript
191 // NewsFeed.react.js
@@ -196,16 +194,16 @@ class NewsFeed extends React.Component {
194
195 loadMore() {
196 // read current params
199 - var count = this.props.queryParams.count;
197 + var count = this.props.relay.variables.count;
198 // update params
201 - this.props.setQueryParams({
202 - count: count + 5
199 + this.props.relay.setVariables({
200 + count: count + 5,
201 });
202 }
203 }
204 ```
205
208 -Now when `loadMore()` is called, Relay will send a GraphQL request for the additional five stories. When these stories are fetched, the component will re-render with the new stories available in `props.viewer.stories` and the updated count reflected in `props.queryParams.count`.
206 +Now when `loadMore()` is called, Relay will send a GraphQL request for the additional five stories. When these stories are fetched, the component will re-render with the new stories available in `props.viewer.stories` and the updated count reflected in `props.relay.variables.count`.
207
208 <br/>
209