Code Monkey home page Code Monkey logo

hello-world-relay-modern's Introduction

Hello World, for Relay Modern

I made this repo because I was excited by the f8 announcements and wanted to jump in and start hacking. Like many huge projects in the nodesphere, it takes longer to get started than it does to write the code. I want to help others get started.

Getting Started

tl;dr to run this project locally:

# Runs a GraphQL server at http://localhost:8080/graphql
# You can view and explore the GraphQL schema/REPL from the browser
make graphql-dev

# Runs an Express server and a Webpack Dev Server
# Go to http://localhost:3000 in your browser - this is the frontend of your app
make dev

Those commands will install everything you need (if you're using a Mac).

If you mess around with the code and want to add more queries or fragment containers, you need to refresh the static query data via:

yarn run relay
# open a new tab and run a watcher
yarn run relay -- --watch

Notes

Relay Modern is the next iteration of Relay from Facebook. Relay is a frontend framework for writing React apps that get their data from GraphQL. We are building the next version of the New York Times using Relay.

It can be a nightmare to learn all of the separate libraries that go into creating a Relay app. Before you can even start, you might have to spend hours learning Webpack, ES6, GraphQL, React, the list goes on forever.

This "Hello, World" app serves a few purposes:

  1. It might become the basis for a Relay Starter KYT
  2. Provides all of the boilerplate to start using Relay Modern
  3. Ignores the now out-of-date isomorphic Relay libs and opts to start fresh with React Router v4 + ES7 decorators

Things that are missing:

  1. Code-splitting with React Router v4 - the examples so far are bad
  2. Isomorphic data fetching - i.e. rendering the result of Relay queries on the server. Universal apps load complete documents on the server. This is crucial for SEO.
  3. Batch query fetching - this can be accomplished with middleware on both servers (App and GraphQL) via React Relay Network Layer, which like every other Relay tool, is now out of date.

How stable is this?

Relay, even in its modern state, will evolve greatly in the short term. Libraries and frameworks will emerge just as we are settling into the new code. My advice is to take this time to familiarize yourself with the new APIs and try to build stuff them.

hello-world-relay-modern's People

Contributors

staylor avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.