Step by step guide #2930
Step by step guide #2930
Conversation
|
|
||
| ### 2.2: A fetchGraphQL Helper | ||
|
|
||
| Next let's update the home screen of our app to show the name of the Relay repository. We'll start with a common approach to fetching data in React, calling our fetch function after the component mounts (note: later we'll see some limitations of this approach and a better alternative that works with React Concurrent Mode and Suspense). First we'll create a helper function to load data from the server. Again, this example will use the GitHub API, but feel free to replace it with the appropriate URL and authentication mechanism for your own GraphQL server: |
There was a problem hiding this comment.
should we add a link here to the limitations you're referring to?
|
|
||
| ## Step 3: When To Use Relay | ||
|
|
||
| At this point we can fetch data with GraphQL and render it with React. This is a reasonable solution that can be sufficient for many apps. However, this approach doesn't necessarily scale. As our app grows in size and complexity, or the number of people working on the app grows, a simple approach like this can become limiting. Relay provides a number of features designed to help keep applications fast and reliable even as they grow in size and complexity: colocating data dependencies in components with GraphQL fragments, data consistency, mutations, etc. Check out [Thinking in GraphQL](/docs/en/thinking-in-graphql.html) and [Thinking in Relay](/docs/en/thinking-in-relay.html) for an overview of how Relay makes it easier to work with GraphQL. |
There was a problem hiding this comment.
not a blocker, but might be good to expand on this section and possibly show people the limitations they'd run into with concrete examples
|
|
||
| ```bash | ||
| # NPM Users | ||
| npm install --save relay-runtime react-relay@experimental |
There was a problem hiding this comment.
we don't explicitly need to install relay-runtime since it's a dependency of react-relay, right? might make this simpler
There was a problem hiding this comment.
4.2 explicitly imports relay-runtime, though, so it's a little odd not to explicitly specify that as a dependency.
if it's feasible from an OSS perspective, it might be reasonable API-wise to add a simple helper to set up a relay environment to react-relay that e.g. just takes in the fetch function, and otherwise makes so that users don't need to touch both react-relay and relay-runtime.
There was a problem hiding this comment.
@taion that's exactly what we were thinking, having a createEnvironment(fetch) helper
|
|
||
| In this guide we'll demonstrate installing the *experimental* release of Relay Hooks, a new, hooks-based Relay API that supports React Concurrent Mode and Suspense. | ||
|
|
||
| First we'll add the necessary packages. Note that Relay is comprised of three key pieces: a compiler (which is used at build time), a core runtime (that is React agnostic), and a React integration layer. |
There was a problem hiding this comment.
not sure if it's worth mentioning the core runtime, or if that will just confuse people
| ... | ||
| "start": "yarn run relay && react-scripts start", | ||
| "build": "yarn run relay && react-scripts build", | ||
| "relay": "yarn run relay-compiler --schema schema.graphql --src ./src/ --watchman false $@" |
There was a problem hiding this comment.
so we're explicitly not running watch mode here, right?
There was a problem hiding this comment.
yes bc people may not have watchman installed, i comment about it below
|
|
||
| If it works, your app will open at [localhost:3000](http://localhost:3000). Now when we write GraphQL in our app, Relay will detect it and generate code to represent our queries in `your-app-name/src/__generated__/`. We recommend checking in these generated files to source control. | ||
|
|
||
| ### 4.2 Configure Relay Runtime |
There was a problem hiding this comment.
I would just say Relay here; I think what "runtime" means may not always be obvious for people, so it might help avoid confusion
There was a problem hiding this comment.
i mention the compiler above
|
|
||
| Note that you'll have to restart the app - `yarn start` - so that Relay compiler can see the new query and generate code for it. See the [Relay Compiler setup docs](/docs/en/installation-and-setup#set-up-relay-compiler) for how to run Relay Compiler in watch mode, to regenerate code as you modify queries. | ||
|
|
||
| ## Step 6: Explore! |
There was a problem hiding this comment.
might be worth having an example app with todos here, but definitely not a blocker
There was a problem hiding this comment.
yes, let's do that in follow-ups
There was a problem hiding this comment.
@josephsavona has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
There was a problem hiding this comment.
@josephsavona has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
|
@josephsavona merged this pull request in 2d1473f. |
Summary: Pull Request resolved: #2930 Reviewed By: jstejada, alunyov Differential Revision: D18351204 Pulled By: josephsavona fbshipit-source-id: 05baa3154841fefafca6be6d05f9b5a1c9b1573b
No description provided.