the-road-to-graphql / react-graphql-github-apollo

🚀 A React + Apollo + GraphQL GitHub Client. Your opportunity to learn about these technologies in a real world application.

The Road to GraphQL [Book]

Official repository for The Road to GraphQL. If you want to leave a review, please do it on Amazon or Goodreads.

Translations of the book into Github

The Road to GraphQL is also available in other languages. Thanks for all translators for their awesome work!

• 🇨🇳 Simplified Chinese

Updates, Help and Support

• Get book updates via E-Mail or Twitter
• Get help, while learning with the book or teach others, in the official Slack Channel
• Find out how you can support the Book

Contribute

You can help to improve the book by opening Issues and Pull Requests (PR).

You can open up any PR that corrects spelling or explains a certain lesson with more detail. When writing such a technical book, you get fast blind on what needs more explanation and on what is already explained well.

In addition, you can open Issues when you run into problems. In order to make the fix for the Issue as easy as possible, please provide a couple of details such as error log, screenshot, which page of the book it happened, your node version (command line: node -v) and a link to your own repository. Not all of these details are mandatory, but most of them help to fix the Issue and to improve the book.

Thanks a lot for your help!

react-graphql-github-apollo's Issues

TypeError: Cannot read property 'viewer' of undefined.

When component did mount, there is no value in { data } returned from component. So, it generates a TypeError: Cannot read property 'viewer' of undefined.

const Profile = () => (

{({ data, loading }) => {
const { viewer } = data;
if (loading || !viewer) {
return

Loading ...

;
}
return (

{viewer.name} {viewer.login}

)
}}

);

Feature: add a comment to an issue

It should be possible to add a comment to the list of comments in issues. If there are "No more comments" via Pagination, there should be an input field to add a comment. In order to add a comment, the addComment from the GitHub GraphQL API can be used.

Add Prettier

It would be great to follow a unified code style in the repository for people contributing to it. That's why I would propose Prettier for it. Even though everyone has to install it on their own, there are a couple of things that would help people to get started.

• add a Prettier configuration file to the project (e.g. with dangling comma true, semicolons true)

• add a "prettier" script to the scripts package.json block to format all files via the command line. This can be done one time initially to have a unified code style.

• add a Contribution section at the bottom of the README.md mentioning to install a Prettier editor/IDE integration (e.g. VS Code) and to enforce it on save file (e.g. VS Code).

process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN produces undefined

const httpLink = new HttpLink({
uri: 'https://api.github.com/graphql',
headers: {
authorization: Bearer ${ process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN },
},
});

The process.env code is unreliable and for me on slower browsers I get an UNDEFINED...

When I replace that code with the solution below it all works.
It is possible that I may be the only one seeing an issue with this...
And if that is the case then your solution works great !

However, in doing some research on the internet I have noticed other people's issues
with Webpack, process.env etc...

I have implemented what I believe to be a much more robust solution for getting the
github-auth-token

You can check it out....
If you like the idea we can scope out me doing a pull request to change the current implementation.

Here is an explanation of my change.

https://github.com/stormasm/garg/blob/master/Readme.md

We could come up with a design where the user simply has to edit a file
we have already created and pop in their github-auth-token...

About as simple as having to edit an ENVIRONMENT variable.

The other solution might be to wrap that code in an async / wait...
But that seems way more complicated...
Curious to know what others think...

Thanks,
Michael

CSS-in-JS

Hi Robin, this looks awesome. Would you consider converting your CSS into styled-components? Including layout components with Grid Layout and Flexbox?
Cheers :)

Feature: add deployment option

It would be great to have a deployment option for devs who might want to get this up quickly (for prototyping reasons for example). That's why I would suggest to add a quick and painless deployment option like Zeit Now for instance.

I hope this issue can add some value 😄

Thanks

Feature: add reaction to a comment

It should be possible to add a reaction to comments/issues by using the addReaction mutation of the GraphQL GitHub API.

Star count not updated

Hello,

Thanks for this course.

When I 'Star' a repo using this app, the app doesn't show the updated star count until I relaunch the app. Is this the expected behavior?

I thought I had a bug in my code and so checked the behavior of this repo.

EDIT: Oops, I just noticed the note about this on page 127 of the book. I'll close this issue.

Apollo Link is not added in dependencies

Thanks for the project 🙌

It is used on https://github.com/rwieruch/react-graphql-github-apollo/blob/master/src/index.js#L5

It still works because of how npm or yarn resolves packages, but it doesn't work with pnpm

Queries (2nd load)

@rwieruch Very good example, thanks for sharing. I have a question regarding Queries, for example RepositoriesList or IssueList, and pagination.
The first time the view mounted the query retrieves 5 entries, and with fetchMore we can load another bunch of 5 entries. Nevertheless, the second time mounted the view (or any successive) the query gets from the store and shows all the entries requested before.
Is it possible to have the same user experience than in the initial case? I mean, still using the data in the store but pulling the first bunch.

Search in issues of a specific repository

Hi all,

First of all, this is a great repo that helped me with getting started with React, Apollo, and GraphQl.

Probably its more of a GitHub GraphQL API related question. Based on this repo, I'm trying to create a demo app that will allow the user to search issues of a specific repository. I was able to list issues of a specific repository. But I couldn't find information on how to search issues of a specific repository. There's a top level search option but it gets results from all repositories.

It'd be very helpful if anyone can give me some clue

Gif