taion / relay-todomvc Goto Github PK

View Code? Open in Web Editor NEW

161.0 4.0 53.0 21.85 MB

Relay TodoMVC with routing

Home Page: https://fashionablenonsense.com/relay-todomvc/

License: Creative Commons Zero v1.0 Universal

JavaScript 100.00%

relay-todomvc's Introduction

Relay TodoMVC

Relay TodoMVC with routing.

This repo includes multiple examples on separate branches:

found-modern: Relay Modern with Found and Found Relay
found-modern-universal: Relay Modern with server-side rendering with Found and Found Relay
found-classic: Relay Classic with Found and Found Relay
found: Legacy Relay with Found and Found Relay
react-router: Relay Classic with React Router and react-router-relay

Usage

Visit http://fashionablenonsense.com/relay-todomvc, or clone this repo and run:

yarn
yarn start

Then point your browser at http://localhost:8080/.

Notes

Most of the code is taken directly from the official example and falls under the license there.
The yarn start command runs webpack-dev-server, and accepts other options, e.g. yarn start --port 5000.

relay-todomvc's People

Contributors

Stargazers

Watchers

Forkers

stevewillard sammosampson saikat cbinners sirscriptalot dieface kylpo dphaener er361 goette pillowsoft kespinola frederickfogerty jgkingston sarmadsangi hackerone joonhocho trbngr vmlinz jnwng alexmcmillan jakexu mikhuang khadorkin traboukos miketamis mathewsp79 senp e050110 alexxnica kryndex nonsensecreativity jkettmann edmondpr mmjd emersonn mozartted juliansuringa cdriscol jquense damassi wewelll joenoon sthukral82 cdthomas peterdresslar young-do harshil1712 daadaadaah

relay-todomvc's Issues

There is no server.js

In you TodoMVC example there is no server.js so what best place to put this code to run mongodb and Graphql. OR IF any full example of todoMVC with mongodb and grapgql you have send me the repo link

Thanks

SSR causes duplicate graphql requests

I'm really interested in using Relay for a new project I'm building, and after testing out isomorphic-react-router it seems the spiritual successor is found-relay with SSR. I tried out the found-modern-universal branch locally, and my biggest concern is that the number of graphql requests to the server would double on initial page load. Besides being bad for the server, that's not great for the client either, and should technically be unnecessary since the client already has all the data it should need inside window.__RELAY_RECORDS__ from what I can see.

Given this, there are a few possibilities for what's happening:

This is a known issue, and perhaps already on your roadmap to add/fix?
This is a bug that I'm experiencing that isn't known -- seems unlikely since I've only added some debugging code so far, but maybe I have an unsupported version of node/npm/whatever.
This is totally unavoidable with Relay Modern -- I really hope this isn't the case.

I'm curious which one of those it is, and if there is an existing or forthcoming solution.

Thanks!

better code-spiltting

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>4Catalyzer/renovate-config)

Confusion on the Fetcher class

Excellent example on universal app react + relay modern! But I am a bit confused on the following code:

export class ServerFetcher extends FetcherBase {
  constructor(url) {
    super(url);

    this.payloads = [];
  }

  async fetch(...args) {
    const i = this.payloads.length;
    this.payloads.push(null);
    const payload = await super.fetch(...args);
    this.payloads[i] = payload;
    return payload;
  }

  toJSON() {
    return this.payloads;
  }
}

export class ClientFetcher extends FetcherBase {
  constructor(url, payloads) {
    super(url);

    this.payloads = payloads;
  }

  async fetch(...args) {
    if (this.payloads.length) {
      return this.payloads.shift();
    }

    return super.fetch(...args);
  }
}

Why do you need to push a null then replace and second to last payload in the ServerFetcher, and why do you need to shift() the payloads for the ClientFetch? Please help me clear up my mind.
Thanks.

found-modern-universal branch does not work if built with fresh package-lock.json file

If the found-modern-universal branch is built without using the committed package-lock.json file, the client side app does not work when you switch between active and completed todos. A real use case would be when setting package-lock=false in .npmrc.

Steps to reproduce:
rm -rf node_modules package-lock.json
npm install && npm start
Open in browser and switch to active and completed.

This error is logged in the browser console:

bundle.js:57202 Uncaught TypeError: Cannot read property 'edges' of undefined
    at TodoList.render (bundle.js:57202)
    at finishClassComponent (bundle.js:40790)
    at updateClassComponent (bundle.js:40758)
    at beginWork (bundle.js:41383)
    at performUnitOfWork (bundle.js:44215)
    at workLoop (bundle.js:44244)
    at HTMLUnknownElement.callCallback (bundle.js:32501)
    at Object.invokeGuardedCallbackDev (bundle.js:32539)
    at invokeGuardedCallback (bundle.js:32588)
    at replayUnitOfWork (bundle.js:43719)
    at renderRoot (bundle.js:44286)
    at performWorkOnRoot (bundle.js:44850)
    at performWork (bundle.js:44771)
    at performSyncWork (bundle.js:44748)
    at requestWork (bundle.js:44648)
    at scheduleWorkImpl (bundle.js:44523)
    at scheduleWork (bundle.js:44483)
    at Object.enqueueSetState (bundle.js:39045)
    at Container.Component.setState (bundle.js:24462)
    at RelayModernFragmentSpecResolver.Container._this._handleFragmentDataUpdate [as _callback] (bundle.js:54937)
    at SelectorResolver.RelayModernFragmentSpecResolver._onChange [as _callback] (bundle.js:52637)
    at _onChange (bundle.js:52818)
    at RelayMarkSweepStore._updateSubscription (bundle.js:53448)
    at bundle.js:53399
    at Set.forEach (<anonymous>)
    at RelayMarkSweepStore.notify (bundle.js:53398)
    at RelayMarkSweepStore.instrumentedCallback [as notify] (bundle.js:9501)
    at RelayPublishQueue.run (bundle.js:52069)
    at Object.next (bundle.js:51673)
    at Object.next (bundle.js:6636)
    at Object.next (bundle.js:6974)
    at Object.next (bundle.js:6974)
    at bundle.js:6905
    at _subscribe (bundle.js:7022)
    at RelayObservable.subscribe (bundle.js:6728)
    at Object.next (bundle.js:6789)
    at Object.next (bundle.js:6974)
    at bundle.js:6897
render @ bundle.js:57202
finishClassComponent @ bundle.js:40790
updateClassComponent @ bundle.js:40758
beginWork @ bundle.js:41383
performUnitOfWork @ bundle.js:44215
workLoop @ bundle.js:44244
callCallback @ bundle.js:32501
invokeGuardedCallbackDev @ bundle.js:32539
invokeGuardedCallback @ bundle.js:32588
replayUnitOfWork @ bundle.js:43719
renderRoot @ bundle.js:44286
performWorkOnRoot @ bundle.js:44850
performWork @ bundle.js:44771
performSyncWork @ bundle.js:44748
requestWork @ bundle.js:44648
scheduleWorkImpl @ bundle.js:44523
scheduleWork @ bundle.js:44483
enqueueSetState @ bundle.js:39045
Component.setState @ bundle.js:24462
Container._this._handleFragmentDataUpdate @ bundle.js:54937
RelayModernFragmentSpecResolver._onChange @ bundle.js:52637
_onChange @ bundle.js:52818
_updateSubscription @ bundle.js:53448
(anonymous) @ bundle.js:53399
notify @ bundle.js:53398
(instrumented RelayMarkSweepStore.prototype.notify) @ bundle.js:9501
run @ bundle.js:52069
next @ bundle.js:51673
(anonymous) @ bundle.js:6636
next @ bundle.js:6974
next @ bundle.js:6974
(anonymous) @ bundle.js:6905
_subscribe @ bundle.js:7022
subscribe @ bundle.js:6728
next @ bundle.js:6789
next @ bundle.js:6974
(anonymous) @ bundle.js:6897
Promise.then (async)
(anonymous) @ bundle.js:6896
_subscribe @ bundle.js:7022
subscribe @ bundle.js:6728
(anonymous) @ bundle.js:6784
_subscribe @ bundle.js:7022
subscribe @ bundle.js:6728
(anonymous) @ bundle.js:6643
_subscribe @ bundle.js:7022
subscribe @ bundle.js:6728
(anonymous) @ bundle.js:6666
_subscribe @ bundle.js:7022
subscribe @ bundle.js:6728
(anonymous) @ bundle.js:6666
_subscribe @ bundle.js:7022
subscribe @ bundle.js:6728
(anonymous) @ bundle.js:8868
F @ bundle.js:1203
fetch @ bundle.js:8858
(anonymous) @ bundle.js:50684
_callee$ @ bundle.js:50683
tryCatch @ bundle.js:22230
invoke @ bundle.js:22464
prototype.(anonymous function) @ bundle.js:22282
resume @ bundle.js:12919
(anonymous) @ bundle.js:12912
F @ bundle.js:1203
send @ bundle.js:12899
AsyncGenerator.next @ bundle.js:12980
_callee$ @ bundle.js:12767
tryCatch @ bundle.js:22230
invoke @ bundle.js:22464
prototype.(anonymous function) @ bundle.js:22282
resume @ bundle.js:12919
(anonymous) @ bundle.js:12912
F @ bundle.js:1203
send @ bundle.js:12899
AsyncGenerator.next @ bundle.js:12980
_callee$ @ bundle.js:27574
tryCatch @ bundle.js:22230
invoke @ bundle.js:22464
prototype.(anonymous function) @ bundle.js:22282
step @ bundle.js:8171
(anonymous) @ bundle.js:8189
F @ bundle.js:1203
(anonymous) @ bundle.js:8168
resolveMatch @ bundle.js:27686
componentDidUpdate @ bundle.js:27535
commitLifeCycles @ bundle.js:42193
commitAllLifeCycles @ bundle.js:43856
callCallback @ bundle.js:32501
invokeGuardedCallbackDev @ bundle.js:32539
invokeGuardedCallback @ bundle.js:32588
commitRoot @ bundle.js:43995
completeRoot @ bundle.js:44903
performWorkOnRoot @ bundle.js:44853
performWork @ bundle.js:44771
performSyncWork @ bundle.js:44748
interactiveUpdates @ bundle.js:44998
interactiveUpdates @ bundle.js:34359
dispatchInteractiveEvent @ bundle.js:36660
bundle.js:42044 The above error occurred in the <TodoList> component:
    in TodoList (created by Relay(TodoList))
    in Relay(TodoList)
    in ReadyStateRenderer
    in section (created by TodoApp)
    in div (created by TodoApp)
    in TodoApp (created by Relay(TodoApp))
    in Relay(TodoApp)
    in ReadyStateRenderer
    in ElementsRenderer
    in StaticContainer
    in StaticContainer (created by BaseRouter)
    in BaseRouter (created by Connect(BaseRouter))
    in Connect(BaseRouter) (created by FarceRouter)
    in Provider (created by FarceRouter)
    in FarceRouter

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ bundle.js:42044
logError @ bundle.js:42083
commitErrorLogging @ bundle.js:42296
commitAllLifeCycles @ bundle.js:43860
callCallback @ bundle.js:32501
invokeGuardedCallbackDev @ bundle.js:32539
invokeGuardedCallback @ bundle.js:32588
commitRoot @ bundle.js:43995
completeRoot @ bundle.js:44903
performWorkOnRoot @ bundle.js:44853
performWork @ bundle.js:44771
performSyncWork @ bundle.js:44748
requestWork @ bundle.js:44648
scheduleWorkImpl @ bundle.js:44523
scheduleWork @ bundle.js:44483
enqueueSetState @ bundle.js:39045
Component.setState @ bundle.js:24462
Container._this._handleFragmentDataUpdate @ bundle.js:54937
RelayModernFragmentSpecResolver._onChange @ bundle.js:52637
_onChange @ bundle.js:52818
_updateSubscription @ bundle.js:53448
(anonymous) @ bundle.js:53399
notify @ bundle.js:53398
(instrumented RelayMarkSweepStore.prototype.notify) @ bundle.js:9501
run @ bundle.js:52069
next @ bundle.js:51673
(anonymous) @ bundle.js:6636
next @ bundle.js:6974
next @ bundle.js:6974
(anonymous) @ bundle.js:6905
_subscribe @ bundle.js:7022
subscribe @ bundle.js:6728
next @ bundle.js:6789
next @ bundle.js:6974
(anonymous) @ bundle.js:6897
Promise.then (async)
(anonymous) @ bundle.js:6896
_subscribe @ bundle.js:7022
subscribe @ bundle.js:6728
(anonymous) @ bundle.js:6784
_subscribe @ bundle.js:7022
subscribe @ bundle.js:6728
(anonymous) @ bundle.js:6643
_subscribe @ bundle.js:7022
subscribe @ bundle.js:6728
(anonymous) @ bundle.js:6666
_subscribe @ bundle.js:7022
subscribe @ bundle.js:6728
(anonymous) @ bundle.js:6666
_subscribe @ bundle.js:7022
subscribe @ bundle.js:6728
(anonymous) @ bundle.js:8868
F @ bundle.js:1203
fetch @ bundle.js:8858
(anonymous) @ bundle.js:50684
_callee$ @ bundle.js:50683
tryCatch @ bundle.js:22230
invoke @ bundle.js:22464
prototype.(anonymous function) @ bundle.js:22282
resume @ bundle.js:12919
(anonymous) @ bundle.js:12912
F @ bundle.js:1203
send @ bundle.js:12899
AsyncGenerator.next @ bundle.js:12980
_callee$ @ bundle.js:12767
tryCatch @ bundle.js:22230
invoke @ bundle.js:22464
prototype.(anonymous function) @ bundle.js:22282
resume @ bundle.js:12919
(anonymous) @ bundle.js:12912
F @ bundle.js:1203
send @ bundle.js:12899
AsyncGenerator.next @ bundle.js:12980
_callee$ @ bundle.js:27574
tryCatch @ bundle.js:22230
invoke @ bundle.js:22464
prototype.(anonymous function) @ bundle.js:22282
step @ bundle.js:8171
(anonymous) @ bundle.js:8189
F @ bundle.js:1203
(anonymous) @ bundle.js:8168
resolveMatch @ bundle.js:27686
componentDidUpdate @ bundle.js:27535
commitLifeCycles @ bundle.js:42193
commitAllLifeCycles @ bundle.js:43856
callCallback @ bundle.js:32501
invokeGuardedCallbackDev @ bundle.js:32539
invokeGuardedCallback @ bundle.js:32588
commitRoot @ bundle.js:43995
completeRoot @ bundle.js:44903
performWorkOnRoot @ bundle.js:44853
performWork @ bundle.js:44771
performSyncWork @ bundle.js:44748
interactiveUpdates @ bundle.js:44998
interactiveUpdates @ bundle.js:34359
dispatchInteractiveEvent @ bundle.js:36660
bundle.js:57202 Uncaught TypeError: Cannot read property 'edges' of undefined
    at TodoList.render (bundle.js:57202)
    at finishClassComponent (bundle.js:40790)
    at updateClassComponent (bundle.js:40758)
    at beginWork (bundle.js:41383)
    at performUnitOfWork (bundle.js:44215)
    at workLoop (bundle.js:44244)
    at renderRoot (bundle.js:44275)
    at performWorkOnRoot (bundle.js:44850)
    at performWork (bundle.js:44771)
    at performSyncWork (bundle.js:44748)
    at requestWork (bundle.js:44648)
    at scheduleWorkImpl (bundle.js:44523)
    at scheduleWork (bundle.js:44483)
    at Object.enqueueSetState (bundle.js:39045)
    at Container.Component.setState (bundle.js:24462)
    at RelayModernFragmentSpecResolver.Container._this._handleFragmentDataUpdate [as _callback] (bundle.js:54937)
    at SelectorResolver.RelayModernFragmentSpecResolver._onChange [as _callback] (bundle.js:52637)
    at _onChange (bundle.js:52818)
    at RelayMarkSweepStore._updateSubscription (bundle.js:53448)
    at bundle.js:53399
    at Set.forEach (<anonymous>)
    at RelayMarkSweepStore.notify (bundle.js:53398)
    at RelayMarkSweepStore.instrumentedCallback [as notify] (bundle.js:9501)
    at RelayPublishQueue.run (bundle.js:52069)
    at Object.next (bundle.js:51673)
    at Object.next (bundle.js:6636)
    at Object.next (bundle.js:6974)
    at Object.next (bundle.js:6974)
    at bundle.js:6905
    at _subscribe (bundle.js:7022)
    at RelayObservable.subscribe (bundle.js:6728)
    at Object.next (bundle.js:6789)
    at Object.next (bundle.js:6974)
    at bundle.js:6897

Warning: You cannot PUSH the same path using hash history

if i click again on same route Link this happen any suggestion?

i read your comments on remix-run/history#43
and on
remix-run/history#178
but unable to figure out solution
any suggestion to fix this?

[INFO] schema.graphql

Hi,
I just want to know, whether your Basic Types GraphQL (https://github.com/taion/relay-todomvc/blob/master/src/data/schema.graphql) is declared for documentation or it's really use it?
Because I don't see, wherever can be use it.

Best regards,
Great job

Dig into Relay's param handling when new params are empty

The workaround at

relay-todomvc/src/routes.js

Line 17 in b7fcac6

queryParams={['status']} // Inject the status param to trigger re-fetch.

is necessary to get react-router-relay to behave correctly during the loading transition, but even net of react-router-relay, Relay itself seems to return the result query with the old route parameters when I try to blank out the route parameters.

When I have a chance, I should dig into the Relay code and figure out what's going on, assuming it's not a bug in react-router-relay.

createInitialFarceRouter with hot reloading

Is it possible to hot-reload routes created with createInitialFarceRouter?

The example exports the equivalent Router component as hot. But I don't see how this is possible using createInitialFarceRouter.

I've had mixed success wrapping each route component with hot – some updates work and others don't, with and without mysterious errors.

where is server.js and landing page .html

I looked into the repository but unable to find these files. Is this example a complete version?

where to point browser

I have git clone it then
npm install
then
npm start
then i point my browser to
localhost:3000 OR localhost:3000/#/ OR localhost:3000/#/active

but not working (http://localhost:3000/ net::ERR_CONNECTION_REFUSED ), where is Port 3000 Config?

Dead links in README.md

These links don't work:

Most of the code is taken directly from the official example and falls under the license there.

src/routes.js: Variable "$status" is never used in operation "routes_TodoApp_Query"

> relay-compiler --src ./src --schema src/schema.graphql --watch

Parsed default in 0.25s

Writing default
Error: You supplied a GraphQL document with validation errors:
/Users/johndoe/test/src/routes.js: Variable "$status" is never used in operation "routes_TodoApp_Query".

I get this error every time I run relay-compiler (1.1.0, relay 1.1.0 too).
@taion ?

Unable to add path to found-modern branch

Hey tried adding a simple route to found-modern

export const routeConfig = makeRouteConfig(
  <Route
    path="/"
    Component={TodoApp}
    query={graphql`
      query router_TodoApp_Query {
        viewer {
          ...TodoApp_viewer
        }
      }
    `}
  >
    <Route path="signin" Component={() => <div>Hello World</div>} />
    <Route
      Component={TodoList}
      query={TodoListQuery}
      prepareVariables={(params) => ({ ...params, status: 'any' })}
    />
    <Route path=":status" Component={TodoList} query={TodoListQuery} />
  </Route>,
);

the same code works fine in found-modern-universal

Any idea what I might be doing wrong here? Would really appreciate any help. @taion

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

chore(deps): update dependency html-webpack-plugin to v5

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

npm

package.json

@4c/babel-preset ^7.4.1

@babel/cli ^7.12.13

@babel/core ^7.12.13

@babel/node ^7.12.13

@babel/runtime ^7.12.13

babel-loader ^8.2.2

babel-plugin-relay ^10.1.3

classnames ^2.2.6

copy-webpack-plugin ^6.4.1

core-js ^3.8.3

cross-env ^7.0.3

css-loader ^4.3.0

eslint ^7.19.0

eslint-config-4catalyzer-react ^1.0.13

eslint-config-prettier ^6.15.0

eslint-plugin-import ^2.22.1

eslint-plugin-jsx-a11y ^6.4.1

eslint-plugin-prettier ^3.3.1

eslint-plugin-react ^7.22.0

eslint-plugin-react-hooks ^4.2.0

farce ^0.4.5

found ^0.5.10

found-relay ^0.8.3

graphql ^15.5.0

graphql-relay ^0.6.0

html-webpack-plugin ^4.5.1

husky ^4.3.8

keycode ^2.2.0

lint-staged ^10.5.4

prettier ^2.2.1

prop-types ^15.7.2

react ^16.14.0

react-dom ^16.14.0

react-relay ^10.1.3

relay-compiler ^10.1.3

relay-local-schema ^0.8.0

relay-runtime ^10.1.3

style-loader ^1.3.0

todomvc-app-css ^2.3.0

todomvc-common ^1.0.5

webpack ^4.46.0

webpack-cli ^3.3.12

webpack-dev-server ^3.11.2

travis

.travis.yml

Check this box to trigger a request for Renovate to run again on this repository