React / GraphQL / Redux design question: Looking for a good practice

Question

A React website I am building is going to have these sections: Hero, Projects, Courses, Skills and a few others. The Skill section will iterate though a list of skills and display a React component SkillCard for each item (as you can see in sketch). SkillCard will open up a SkillDetail component when clicked. The SkillDetail pop up as a modal and display data of Projects and Courses that are associated with it. Project and Courses sections will also, in their own section, print a list and when clicked they will open up a ProjectDetail or CourseDetail component. So it is all connected dynamically. The project and courses section each have a similar sketch as below.

I think GraphQL might be a wonderful choice for this. The main question is, do I even need Redux?

So before I can answer that question, it is pertinent that I understand how to set up my project. So here is a sketch that I did that can help you see. Lets just focus on the Skill section.

enter image description here

The React Modal is the question. I would like that to pop up taking up around 70% of the screen and blur out the background for a nice effect. So I am thinking skill detail should be loaded from the Skill component.

The Skill Card might have this info:

Skill {
 id
 name
 about
 stars
}

The SkillDetail component may have this info:

SkillDetail(id: String) {
 skillName
 Project {
 id
 name
 url
 }
 Course {
 id
 name
 url
 }
}

This is just a single page app and as you scroll down you will see a Hero, Skills, Projects, Courses, and other sections.

Before GraphQL, I would think that the entire app is a container that sent 3+ request to get lists of: skills, projects, courses and others. This is what I would do with Redux and these reducers can cache the response (until page reload). Now I am wondering if I even need Redux at all.

I think I must first figure out where the containers are...

Modules
--/Components
 app.js (main container)
----/Skills
 Skill.js (list of Cards)
 SkillDetail.js (modal popup)
----/Projects (list of Cards)
 ProjectDetail.js (modal popup)
----/Courses
 Courses.js (list of Cards)
 CourseDetail.js (modal popup)

• Any ideas on if using only GraphQL makes sense?
• Should I use redux?
• Do you think that each *Detail.js component should be its own GraphQL container?

edit: Here is App.js graphql connect

export default compose(
 graphql(queries.getSkillList(), {
 name: "skills"
 }),
 graphql(queries.getProjectList(), {
 name: "projects"
 }),
 graphql(queries.getCourseList(), {
 name: "courses"
 }),
)(App);

Technically, these 3 root queries have ALL the information that the Detail components need, they just need sorted. Is there a need for more requests to the server? Does GraphQL use this data instead of requesting specific endpoints from the server?

I am really trying to do this the right way and I am open to any and all feedback. Thank you.

• Berin Loritsch: One of the things that Redux states on their own website is that you might not need Redux at all. Redux forces you to give up something in order to gain something. I.e. Reducers allow you to modify how your application works without losing your application state, at the cost of some boiler plate code and more complexity. If your application state is handled primarily in the GraphQL server side, then the benefit of Redux is lost since you can still modify your application code without losing state.

Answer 1

Right on the front page of the Redux website is a link to an article saying: You Might Not Need Redux. It is well worth a read since it explains very clearly what you gain by using Redux and what you lose by using Redux. I think it is a very fair article, and for the Redux website to have it on their front page, the Redux team must agree.

If the application state is truly handled in the Web Service side, then when your application reloads after an edit, it will fetch the state for you. The net result is that one of the biggest practical benefits of Redux becomes redundant.

That said, GraphQL can let you populate your screen with exactly the data elements it needs. It has the potential to drastically change how you design your application. There's a good chance you haven't cracked it's potential for you yet. There's a bit of a learning curve.

Now, if you store any state locally Redux starts to have benefits again. Every time the JavaScript reloads you have the potential of losing your local state. Redux provides the mechanisms to prevent that local data loss so that you can keep chasing that bug one step at a time.

The answer becomes it depends on a few factors.

Answer 2

You will probably need redux, yes. Redux can handle the possible actions and app state, while graphql is for fetching data only. Redux will for example keep track of the selected skill separating app state from the components and making the components communicate much more easy.

• Michael Bruce: So a app.js container that might have 3 actions , FETCH_SKILLS, FETCH_PROJECTS, and FETCH_COURSES. And these will be kept in Redux reducers. Then when I click on the individual items it will then open a GraphQL container such as: ProjectDetails, SkillDetails or CourseDetails?