nodkz / relay-northwind-app

A complex React, Relay, GraphQL demo app. Online demo:

OUTDATED

If somebody somebody wants take care about this demo - please open an issue. And I'll grant your permissions. Thanks.

Northwind demo app (on Relay Modern)

This is a true story. The events depicted took place in Northwind in 1996-1998. At the request of the survivors, the names have been changed. Out of respect for the dead, the rest has been told exactly as it occurred. ©Fargo

This is application shown Component-Based approach on full power 💪💪💪.

Build using React, Relay Modern, GraphQL, React Router 4.

Live DEMO

Live GraphQL server DEMO

Internally implements many cool things:

• Connections with infinite lists and filtering
• Running Relay queries from component (not via routing)
• Display loaders when fetching data
• Build on top of graphql-compose auto-generated GraphQL schema from mongoose (MongoDB).
• Eslint with GraphQL fragment validation, Webpack 3, Babel 7.
• Static analysis with Flowtype
• Many thanks to @taion for react-bootstrap

Data models

This APP has 8 basic types, which has many cross-relations (via one-to-one, arrays, connections):

• category
• customer
• employee
• order
• product
• region
• shipper
• supplier

Previous Relay versions

Working example on Relay Classic can be found in classic branch, Relay Compat in compat branch.

About server-side (GraphQL + MongoDB)

GraphQL server source code (graphql-compose inside). Also you may find all data in JSON and CSV formats for your needs.

Thanks to

• @shayden for the csv dump.
• @tmcnab that converted it to MongoDB.
• @leisenstein that clean up a CSV data.

License

MIT

relay-northwind-app's Issues

On windows machine I'm got the below error for relay-modern

Relay Watcher was exited!
{ Error: spawn yarn ENOENT
at _errnoException (util.js:1024:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:190:19)
at onErrorNT (internal/child_process.js:372:16)
at _combinedTickCallback (internal/process/next_tick.js:138:11)
at process._tickDomainCallback (internal/process/next_tick.js:218:9)
code: 'ENOENT',
errno: 'ENOENT',
syscall: 'spawn yarn',
path: 'yarn',
spawnargs: [ 'relay', '--', '--watch' ] }
Relay Watcher was exited!

No data returned for operation `EmployeeListQuery`, got error(s): Unknown type "CustomerAddress". Did you mean "CustomerEdge", "Customer", or "CustomerConnection"? See the error `source` property for more information.

How to do mutations?

I've already talked with @nodkz about this. Using this as a way to keep track. Essentially I want to know how to make a mutation that updates a hasMany, hasOne relationship.

I will help you with pleasure. But let keep our discussion open via github issues and use my existed repos for examples and solving problems:

1. https://github.com/nodkz/relay-northwind-app for the client side howtos questions (Relay specific).
2. https://github.com/nodkz/graphql-compose-examples for the server side GraphQL howtos questions.
3. https://github.com/nodkz/graphql-compose for library API

Before answering to your question, firstly we should fix knowledge about Relay Mutation API:

• In summer 2016 (maybe earlier) Relay team started to write new Relay 2 facebook/relay#1369 it will have better Mutation API
• Forget about tracked/fat query ;) Old Mutation API is fatigue and pain. Pain of awful number of Mutation files which has problem of keeping in sync mutations and components. When your component has several mutations (eg. changeStatus, update, remove) then you should to create 3 mutation files and write quite a lot of code in the component itself. So I'll share much better solution how to work with mutations with less typing and keeping your code clear.
• So take a look on new mutation API https://facebook.github.io/relay/docs/api-reference-relay-graphql-mutation.html#content it is not ideal and may be changed with time, so definitely we should wrap it and make simpler for using it in our apps facebook/relay#1046 (comment)

---

Khm... before playing with mutations needs to tune relayStore:
So the 1st main step will be creation of own instance of RelayEnvirement (also called as relayStore). Our relayStore will provide helper methods like mutate (for mutations) and reset (when login/logout for cleaning up store from data) Take it here https://gist.github.com/nodkz/03f28aaa1b66195b517ecf06e92487bf
Also we will add to our relayStore fetch method for manual fetching data from server (sometimes you may need data that is difficult to obtain via component fragments, eg. list of admins, or list of cities for autosuggestion component).

So fork my repo https://github.com/nodkz/relay-northwind-app

• try to put there somehow relayStore in app/clientStores.js
• add Reset link for flushing Relay cache (in the footer of MainPage)

---

In further we will refactor the code, introduce mutations and solve tons of other small questions which will occur.

Best,
Pavel.

Online demo is broken

Online demo is broken:

No data returned for operation `OrderConnectionQuery`, got error(s): Cannot query field "id" on type "Order". Did you mean "_id"? Cannot query field "id" on type "Order". Did you mean "_id"? Cannot query field "id" on type "Customer". Did you mean "_id"? Cannot query field "id" on type "Shipper". Did you mean "_id"? Cannot query field "id" on type "Employee". Did you mean "_id"? See the error `source` property for more information.

Let's migrate to Modern?

Hello, @nodkz

Are you accepting PRs migrating to Relay Modern?
I'd love to help!

If it's ok, just let me know how can I contribute 😄