learnrelay / pokedex Goto Github PK

View Code? Open in Web Editor NEW

48.0 48.0 22.0 94 KB

Pokedex example app using and teaching Relay and GraphQL

Home Page: http://demo.learnrelay.org

HTML 5.81% CSS 29.57% JavaScript 64.46% Shell 0.15%

pokedex's Introduction

Learn Relay

Source code for learnrelay.org

Contribution

If you have a suggestion on how to improve Learn Relay please either open an issue or create a pull request by changing the source files in content.

.
├── connections
│   ├── cursors-pagination.md
│   └── what-is-a-connection.md
├── go-further
│   └── wrapup.md
├── images
│   ├── demo.png
│   ├── edges.png
│   ├── favicon.png
│   └── playground.png
├── introduction
│   ├── get-started-bottom.md
│   ├── get-started.md
│   └── what-is-relay.md
├── mutations
│   ├── mutation-types.md
│   ├── optimistic-updates.md
│   ├── relay-store.md
│   └── what-is-a-mutation.md
├── overview
│   ├── cover.md
│   ├── intro.md
│   └── prerequisites.md
├── queries
│   ├── containers-fragments.md
│   ├── variables.md
│   ├── what-is-a-query.md
│   └── working-with-fragments.md
└── routes
    ├── react-router-relay.md
    └── route-in-relay.md

Development

npm install
npm start # open localhost:4300

Help & Community

Join our Slack community if you run into issues or have questions. We love talking to you!

pokedex's People

Contributors

Stargazers

Watchers

pokedex's Issues

Step-02: Reverts relay container around ListPage

In step-01 we create the relay container around the ListPage component,
However are then instructed to checkout the step-02 branch which has this change reverted.

Also, step-01 the instructions about adding the relay container are missing the instructions to add import Relay from 'react-relay'.

After remove `withRouter`, some instances of `this.props.router` are undefined

From exercise 4 onwards, in PokermonPage.js the instances of this.props.router.push are throwing errors: Cannot read property 'push' of undefined.

I'm aware of the withRouter removal in #11, but I don't see this.props.router.push rewritten to something else, hence the solution samples are throwing blocking errors.

ESLint'ing Errors

I did a git checkout on this file, ran npm start and got the following linting errors. Noting in case this isn't expected given the there is an '.eslintrc file in the repo.

(feature request) Create a standalone express graphql server

There are some examples for how to setup a simple graphql server, e.g.

https://medium.com/apollo-stack/tutorial-building-a-graphql-server-cddaa023c035

We could implement a simple version with just the needed features for Pokedex.

fix the inconsistencies brought up by PR #6

see #6 and #7

Wrong name in Documentation for CreatePokemonMutation

In the section about optimistic updates you are talking multiple times about "AddPokemonMutation" but the name in the docs and in the code is "CreatePokemonMutation".

[Meta] Improve contribution workflow

Our current workflow goes like this:

Changes to the separate steps should be made in the respective folder in the master branch. After all changes, the update-branches.sh script should be executed that syncs these folders with the separate branches.

This is an issue when contributors create a pull request for a separate branch, as the master branch falls out of sync. Also, when the PR is merged but afterwards the update-branches.sh script is executed, the commits on the branch are lost.

The following things have to be done:

fix the inconsistencies brought up by PR #6, its merging and the force push done by update-branches.sh
fix other inconsistent branches. these include at least step-01, step-01-solution and step-05
find a workflow for PRs that works for contributors and doesn't introduce inconsistencies. create CONTRIBUTE.md that communicates clearly how to contribute.

A suggestion for a PR workflow:

Add the separate folders to .gitignore in master
introduce pull-branches.sh that pulls all branches into separate folders to the master branch

Then a possible workflow could look like this

go to the master branch. execute pull-branches.sh. introduce changes to a branch in its folder. call update-branches.sh to sync the changes from the folder to the branch.

withRouter missing

Couldn't get the routing from PokemonPreviewPage back to ListPage. Kept complaining about this.props.router being null. Solved via wrapping ala <Route ... component={withRouter(PokemonPage)}.

Why all data is re-fetched every time I navigate back and forward

If you open card and then navigate back - all data is requested again:

Why is that? Shouldn't Relay Modern cache and request it only once?

step-01 instructions are slightly off

The steps are slightly off. Instead off:
git clone [email protected]:learnrelay/pokedex.git
cd pokedex
git checkout step-01
npm install
npm start # open localhost:3000

I needed to do this
git clone [email protected]:learnrelay/pokedex.git
cd pokedex
git checkout step-01
cd branch-step-01
npm install
npm start # open localhost:3000

The src folder inside the root of the step-01 branch doesn't have the correct version of the code. Please let me know if you need any further info.

use node-field for pokemon card

Wrong link in README.md

The link in If you haven't done it already, checkout the interactive Learn Relay tutorial. in README.md links to https://learnrelay.org/ which redirects to https://www.learnrelay.com/, which does not exist. Should probably link to https://www.learnrelay.org/, and https://learnrelay.org/ should not redirect to .com, but .org.

{
  "data": null,
  "errors": [
    {
      "locations": [
        {
          "line": 3,
          "column": 5
        }
      ],
      "path": [
        "viewer",
        "allPokemons"
      ],
      "code": 2041,
      "message": "You requested 100000 nodes. We will only return up to 1000 nodes per query.",
      "requestId": "cj0joxj4rj5nh0163ml0et4ao"
    }
  ]
}

Missing asset folder in step-05

There is no asset folder with the delete.svg icon so the PokemonPage can't load as it does not find the delete image in line 5 in PokemonPage.js

import deleteIcon from '../assets/delete.svg'