juffalow / react-relay-example Goto Github PK

View Code? Open in Web Editor NEW

30.0 4.0 8.0 2.47 MB

Example project how to use React, Relay and TypeScript

Home Page: https://quotes.juffalow.com/

License: MIT License

HTML 7.26% TypeScript 91.29% CSS 1.44%

react relay react-bootstrap react-router react-helmet graphql example-project typescript

react-relay-example's Introduction

React + Relay Example

List of Quotes with Authors implemented in React + Relay.

You can use either PHP or Node as a backend.

How to run the project

Installation

yarn install

# or if you use npm

npm install

Configuration

Create src/config.ts or rename src/config.example.ts and make sure it contains your server's graphql endpoint url:

export default {
  graphql: 'http://localhost:3013/graphql',
};

Download GraphQL schema

For this, you need to have graphql-cli installed.

graphql get-schema --project quotes -e default

Build / transform components which are using graphql / relay

yarn run relay

Start the project

yarn start

Old version

This version is using older Relay version 10.0.1:

1.2.3

Working version of React + Relay application written in JavaScript:

1.0.0

License

MIT license

react-relay-example's People

Contributors

Stargazers

Watchers

Forkers

kamilkozik wpaczula pietgk kenneth-huang marcelmalik softmuneeb jdmoody zulkarnen-force

react-relay-example's Issues

useLazyLoadQuery vs usePreloadedQuery

First of all, thank you for your example, it helped me to get at least something from relay (as docs are sometimes controversial and not clear).

I found that in the migration guide they say that useLazyLoadQuery can be used.
However, in the useLazyLoadQuery description, they say
Instead, prefer usePreloadedQuery.
https://relay.dev/docs/api-reference/use-lazy-load-query/#uselazyloadquery

The problem with usePreloadedQuery to me is that it gets queryRef out of nowhere in all examples. They say I should handle it in routing, but I don't think react-router allows to do this.

Although it could be done like this

const WrappedHomePage = () => {
  const [queryRef, loadQuery] = useQueryLoader(HomePageQuery);

  useMemo(() => {
    loadQuery();
  }, [loadQuery]);

  return <HomePage queryRef={queryRef} />;
};

const HomePage = ({ queryRef }) => {
  const query = usePreloadedQuery(
    graphql`
      # By convention it should be <ComponentName></ComponentName>
      query HomePageQuery {
        ...HomePageContainer_repository
      }
    `,
    queryRef
  );

  return (
    <div>
      <HomePageContainer fragmentRef={query} />
    </div>
  );
};

I am not sure whether it is better at all. Could anyone suggest a solution of integrating it with react-router and use preloaded query?

Add tests

What an example it is without tests? Can someone help me and add tests for relay? Or any other kind of tests?

SSR streaming HTML, for SEO?

Any chance you'd want to update this example with SSR and streaming HTML?

So it will work well for regular sites that want SEO?

Currently Google's cached version of the page is empty (as it is a pure SPA): http://webcache.googleusercontent.com/search?q=cache:https://quotes.juffalow.com/

The other people who've done something towards this end, is:

Gabriel / zth (but in ReScript): https://x.com/___zth___/status/1503758833260417028?s=20
Vincent (gif of intriguing demo): https://x.com/vincentriemer/status/1461177900586049536?s=20
XiNiHa : https://github.com/XiNiHa/vilay (using https://vike.dev (previously called vite-plugin-ssr) with Vite for the SSR part). According to my talk with him on Discord, he archived the repo because of facing some issues with bundling (maybe the error that usePageContext() not able to find the provided context, likely because of re-wrapping Vike's exports as a separate package, if he recalls correctly), and due to not needing SSR for prod any more (he was making an admin dashboard). Note that Vike's V1 design is soon upcoming (should be stable/finalized), track progress here: vikejs/vike#578 and progress with the docs here: vikejs/vike#1206