@economist/isomorphic-relay

1.0.0 • Public • Published

Isomorphic React Relay npm version

Enables server-side rendering of React Relay containers.

If you use react-router-relay you might also become interested in isomorphic-relay-router.

Acknowledgments

Thank you to everyone who helped in the development of this project with suggestions, testing, reported issues, pull-requests. Thank you to the Facebook employees who reviewed my contributions to Relay, which helped to improve the server-side rendering support.

Installation

npm install --save isomorphic-relay

How to Use

Here is an example with detailed comments of how isomorphic-relay can be used on the server:

import IsomorphicRelay from 'isomorphic-relay';

const rootContainerProps = {
  Container: MyContainer,
  queryConfig: new MyRoute(),
};

app.get('/', (req, res, next) => {
  // Create a Relay network layer. Note that on the server you need to specify
  // the absolute URL of your GraphQL server endpoint.
  // Here we also pass the user cookies on to the GraphQL server to allow them
  // to be used there, e.g. for authentication.
  const networkLayer = new Relay.DefaultNetworkLayer(
    'http://localhost:8080/graphql',
    { headers: { cookie: req.headers.cookie } },
  );

  // Use IsomorphicRelay.prepareData() to prefetch the data required for
  // rendering of the Relay container.
  IsomorphicRelay.prepareData(rootContainerProps, networkLayer).then(({ data, props }) => {
    // Use <IsomorphicRelay.Renderer> to render your Relay container when the data is ready.
    // Note that we cannot use the standard <Relay.Renderer> because at the first render
    // it renders an empty/loading screen even when all the required data is already available.
    // Unlike that, <IsomorphicRelay.Renderer> in that case renders normally right at
    // the first render, and it is important for server side rendering
    // where we do not have a second render.
    const reactOutput = ReactDOMServer.renderToString(
      <IsomorphicRelay.Renderer {...props} />
    );

    // To allow the data to be reused in the browser, serialize and embed it
    // in the page together with the React markup.
    res.render('index.ejs', {
      preloadedData: JSON.stringify(data),
      reactOutput
    });
  }).catch(next);
});

And here is an example of the code that can be used in the browser:

import IsomorphicRelay from 'isomorphic-relay';

const environment = new Relay.Environment();
environment.injectNetworkLayer(new Relay.DefaultNetworkLayer('/graphql'));

// Deserialize the data preloaded on the server.
const data = JSON.parse(document.getElementById('preloadedData').textContent);

// Use IsomorphicRelay.injectPreparedData() to inject the data into the Relay cache,
// so Relay doesn't need to make GraphQL requests to fetch the data.
IsomorphicRelay.injectPreparedData(environment, data);

// Use IsomorphicRelay.prepareInitialRender() to wait until all the required data
// is ready for rendering of the Relay container.
// Note that it is important to use the same rootContainerProps as on the server to
// avoid additional GraphQL requests.
IsomorphicRelay.prepareInitialRender({ ...rootContainerProps, environment }).then(props => {
  // Use <IsomorphicRelay.Renderer> to render your Relay container when the data is ready.
  // Like on the server we cannot use the standard <Relay.Renderer>, bacause here
  // we also need to render normally right at the initial render, otherwise we would get
  // React markup mismatch with the markup prerendered on the server.
  ReactDOM.render(<IsomorphicRelay.Renderer {...props} />, document.getElementById('root'));
});

Also see the Star Wars example.

Package Sidebar

Install

npm i @economist/isomorphic-relay

Weekly Downloads

11

Version

1.0.0

License

BSD-2-Clause

Last publish

Collaborators

  • wellingtonvieira
  • economist-org-bot
  • pvalentim
  • olumideosikomaiya
  • ninjanailseconomist
  • saurabhsatwani-teg
  • cristianpetre-teg
  • jakezachariahnixon
  • devrath-teg
  • econ.martinchan
  • jimc-teg
  • teenuburi
  • leahpatel
  • zeek01
  • paarthpuri
  • emilyblundellteg
  • aayushkumarecon
  • faiz-teg
  • benhalsteadteg
  • rorywebber
  • sahu-economist
  • romany-gl
  • johnfriend
  • josephc_100
  • robthomas72
  • rully-teg
  • irshadfareed
  • idudenkov
  • emiliawil
  • faisal1505
  • charlottecutler
  • petervoeconomist
  • ghazali-teg
  • yordan-teg
  • ykswra-teg
  • rambot
  • trankimtung-economist
  • rickmather
  • mikeecon
  • ovysotskaya
  • siva-teg
  • tayoja
  • gibbsy
  • karltaylor
  • virajvinodkumar
  • lenface
  • connorpayne
  • banguneco
  • vinnay0308
  • adjizulfiqarfauzi
  • afiefyr
  • tegalankf
  • endiirawaneco
  • elenafayethomas
  • rendyfebry.eco
  • hzeraat2
  • irfan2204
  • stevenleeeconomist
  • konrad.korczynski
  • chituruchinwah
  • chloemcmullan
  • ransomprofit
  • richard-frost
  • tgrisley
  • neilateconomist
  • solo-digital
  • yevdomin
  • fteoldi
  • nanjunda-teg
  • alexeco
  • rospearce
  • sangeeta-economist
  • mfiresky
  • larry4000
  • celltowertrees
  • chriscamplin
  • prateek.maheshwari
  • vishal-gholkar
  • wizbit77
  • danielmensah
  • raghu-teg
  • dwi-teg
  • rsmutch
  • ctheodoridou
  • cristiangutueconomist
  • edemeconomist
  • silvialazin
  • nam-econ
  • barneyward
  • uwajacques
  • lgordienko
  • liambird
  • kellybrocklehurst
  • sebastianchumaceiro
  • luketaylor
  • yousea2_economist
  • krishnapriyaelango
  • azzuhasan
  • simonwtaylor
  • jayyecm
  • kartik.saxena
  • nautiyalmanish
  • matthewarrowsmith
  • rmisyuk
  • cristian.v
  • kamil_p
  • jonleeeconomist
  • angelamaugey
  • farnaz.ostovari
  • grmnd
  • ov212
  • xaviergimenez
  • simmyd91
  • edwilliams
  • umairyounus
  • layo_titi
  • johnperagine
  • stevedrog
  • jimhuntyeconomist
  • cjallen88
  • ashrafiftekhar
  • v.potonya
  • evgenylyndin
  • tonygoodey
  • sugadev.durairaj
  • apoorv_srivastav_infosys
  • futuraprime
  • diana.carmen
  • economistrobot
  • withoutnations
  • karthikeyaninfy
  • debarshi-banerjee01
  • tuhindasinfy
  • adwaitmathkari
  • utkarsh_nayan
  • shubham20info
  • davidwong.economist.com
  • sumitinfy
  • a-w-l
  • mikeconway
  • jamespenrice
  • matt-hall-kcc
  • johnvannguyen
  • ferdousiqbal
  • alexselbyboothroyd
  • elliottmorris
  • stephanienedoklanova
  • gdunton
  • drinkataco
  • fceco
  • tothvoj
  • ecomorant
  • danaciocan
  • mattcouchman
  • kristynolan
  • johti
  • economist-web-team
  • mattpointblank
  • sukh-kinandcarta
  • otomogroove
  • samualdjpayne
  • impactyogi
  • lewtur
  • shahdotrahul
  • pedrito77
  • davidkelley87
  • stancek_globallogic
  • kevin-economist
  • matildealiffi
  • pads
  • dominik_secka
  • raynelle03
  • robmorgan-tab
  • forpet
  • jonh-econ
  • davidgoodchild
  • just_ak87
  • fadumoaideed
  • jaroslavhamrak
  • mloveday
  • irfanyasin_teg
  • mbrzek
  • igorshcherba
  • manunes
  • joeawillis
  • johnjameshodgins
  • ethancevans
  • jonny_kc