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.
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.