Understanding render-as-you-fetch with Relay

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • found-relay

    Relay integration for Found

  • So now we need to find a suitable router that can support this pattern of requesting data outside of the render path. The relay community has built an extension to Found - but it hasn't been updated for render-as-you-fetch. The Found router itself is quite flexible and extensible and so you could potentially implement entrypoints on top, but I haven't seen an example of this. As for other routers, I haven't seen any that aren't taking the react-router approach.

  • found

    Extensible route-based routing for React applications

  • So now we need to find a suitable router that can support this pattern of requesting data outside of the render path. The relay community has built an extension to Found - but it hasn't been updated for render-as-you-fetch. The Found router itself is quite flexible and extensible and so you could potentially implement entrypoints on top, but I haven't seen an example of this. As for other routers, I haven't seen any that aren't taking the react-router approach.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • relay-examples

    A collection of sample Relay applications

  • It seems like this is a problem that the relay team have seen in advance. Their Issue Tracker example rolls its own routing system based off the same primitives used by react-router.

  • react-suspense-router

    [NOT MAINTAINED] React Router for React Suspense and Render-as-You-Fetch

  • There's also a couple of routers that people have built after encountering this problem: React Suspense Router and Pre-Router. Both are not very mature, but are promising. Pre-router particularly is quite clearly inspired by the Issue Tracker example.

  • pre-router

    A router for React with code and data preloading at its core

  • There's also a couple of routers that people have built after encountering this problem: React Suspense Router and Pre-Router. Both are not very mature, but are promising. Pre-router particularly is quite clearly inspired by the Issue Tracker example.

  • react-relay

    Relay is a JavaScript framework for building data-driven React applications.

  • I've been moving an existing codebase to a GraphQL API over the last few weeks using Relay as the front-end client. One thing I've been struggling with has been implementing the render-as-you-fetch (or fetch-as-you-render) pattern. A big part of the difficulty here is how our tools rely on the render path for coordinating work. I'm using this article as a way to write down what I've learned researching and figuring out this pattern in practice.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts