@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

  • economist-org-bot
  • wellingtonvieira
  • v.potonya
  • evgenylyndin
  • tonygoodey
  • uwajacques
  • nanjunda-teg
  • futuraprime
  • diana.carmen
  • economistrobot
  • withoutnations
  • davidwong.economist.com
  • barneyward
  • ashutosh-teg
  • angelamaugey
  • a-w-l
  • irfan2204
  • mikeconway
  • jamespenrice
  • matt-hall-kcc
  • yannstepienik
  • johnvannguyen
  • ferdousiqbal
  • nam-econ
  • madhav1-teg
  • kartik.saxena
  • alexselbyboothroyd
  • tayoja
  • elliottmorris
  • elenafayethomas
  • rendyfebry.eco
  • greg-cann
  • stephanienedoklanova
  • gdunton
  • drinkataco
  • fceco
  • shrikant-npm-economist
  • tothvoj
  • ecomorant
  • danaciocan
  • mattcouchman
  • kristynolan
  • johti
  • economist-web-team
  • sukh-kinandcarta
  • otomogroove
  • samualdjpayne
  • impactyogi
  • shahdotrahul
  • pedrito77
  • himanshupaleco
  • aniketguptaeco
  • ishankguptaeco
  • stancek_globallogic
  • kevin-economist
  • matildealiffi
  • pads
  • raynelle03
  • robmorgan-tab
  • forpet
  • jonh-econ
  • davidgoodchild
  • just_ak87
  • fadumoaideed
  • jaroslavhamrak
  • mloveday
  • irfanyasin_teg
  • igorshcherba
  • manunes
  • joeawillis
  • johnjameshodgins
  • ethancevans
  • jonny_kc
  • adjizulfiqarfauzi
  • tegalankf
  • afiefyr
  • chriscamplin
  • jayyecm
  • cjallen88
  • kamil_p
  • jimhuntyeconomist
  • stevedrog
  • johnperagine
  • simonwtaylor
  • layo_titi
  • umairyounus
  • banguneco
  • xaviergimenez
  • ov212
  • rmisyuk
  • grmnd
  • farnaz.ostovari
  • matthewarrowsmith
  • nautiyalmanish
  • charlottecutler
  • ykswra-teg
  • cristiangutueconomist
  • azzuhasan
  • sangeeta-economist
  • edemeconomist
  • endiirawaneco
  • yordan-teg
  • ghazali-teg
  • krishnapriyaelango
  • rsmutch
  • yousea2_economist
  • luketaylor
  • ctheodoridou
  • larry4000
  • celltowertrees
  • kellybrocklehurst
  • emiliawil
  • mfiresky
  • faisal1505
  • liambird
  • lgordienko
  • petervoeconomist
  • dwi-teg
  • raghu-teg
  • zeek01
  • jakezachariahnixon
  • leahpatel
  • danielmensah
  • teenuburi
  • robthomas72
  • wizbit77
  • aayushkumarecon
  • rully-teg
  • romany-gl
  • rospearce
  • devrath-teg
  • cristianpetre-teg
  • benhalsteadteg
  • alexeco
  • irshadfareed
  • jimc-teg
  • aaron-economist
  • fteoldi
  • yevdomin
  • econ.martinchan
  • rahuldhuri
  • johnfriend
  • megha123
  • paarthpuri
  • sahu-economist
  • neilateconomist
  • faiz-teg
  • saurabhsatwani-teg
  • rorywebber
  • josephc_100
  • danielperezcascon
  • olumideosikomaiya
  • walteco
  • gibbsy
  • ovysotskaya
  • ninjanailseconomist
  • connorpayne
  • siva-teg
  • lenface
  • shivpathak-teg
  • akshatrastogi01
  • benpeh
  • virajvinodkumar
  • ajeet-singh024
  • rickmather
  • trankimtung-economist
  • alanrennie
  • greggschofield
  • tgrisley
  • ransomprofit
  • stevenleeeconomist
  • igilham-economist
  • femieconomist
  • luthfifrahman
  • sagar-teg
  • ninatarasyuk
  • andrys-teg
  • abnpm07
  • rekhakumari-economist
  • mohammadashrafiftekhar
  • santoshmeconomist
  • carlo-economist
  • ankurrajteg
  • kalpna-teg
  • prithvi-the-economist
  • rashim-economist
  • scott-edwards-economist
  • andrewmcclay_partner
  • vrushabheconomist
  • kandarp-eiu