Talks Tech #48: Journey Into FullStack Apps With GraphQL + React
They talked about using a CMS with WordPress and having a Headless setup. You could technically use GraphQL in that instance. React, and GraphQL have different approaches to things, especially the Schema Definition Language or the SDL. React is an endpoint tied to an identity resource, which means a lot of endpoints with different shapes. GraphQL has a custom schema that developers can use to describe multiple operations in the same link if they identify it with a different keyword. There's also different handling of resources. React, if you want to make a call for the Women Who Code database that pulls the speakers and the topics, you would probably create multiple routes and have URL paths to create and pull in that information and data.GraphQL uses a single endpoint. You would do one call to your server or database and pull everything in. Both React and GraphQL have similar approaches to moving data and start functions. GraphQL repeats several times and requests details in the long run. This helps prevent over-fetching or under-fetching that often happens inside React API.
This is basically what I would get from MongoDB. It is just a JSON array. I have some data topics and speakers that I'm pulling from the database, and this is basically what I would get in a JSON format.
Pulling in more data and creating a new query type, it's just the same repeat, rinse and repeat. Creating another GraphQL object, you end up, especially on the node server side, just creating a lot of similar functions and pulling in different GraphQL objects and strings and what you want to pull out of your database. This is the powerhouse of GraphQL, using the single endpoint in the same database and being able to pull in the speakers like I do with the topics and just pulling in all that data.
Going through the same thing, creating a new query. You don't have to specify if you're doing a query. You can also have it as these two nice little brackets, and it will pull in my data. All I did was add in the speakers with it on top of my topics. Now I'm pulling all that data in. Now you’re getting both the topics and Women Who Code speakers. You don't have to call in all the data. I have people's occupations. Maybe I don't want that, so it's just removing it simply for my query, and then next, we'll pull out and remove it for my data. This doesn't dictate it on the React side. This is just the GraphQL UI that lets me know if I'm pulling in my queries correctly and also what kind of my endpoints could have basically output. I can see what I'm getting, and it's nice. It will show you if you're missing anything or have an error.
GraphQL was intended to be used for front-end developers, especially since it was there to help simplify the ways to request answers with sometimes really complex and cumbersome data structures. It makes it easy to do a bit more without having to rewrite all your code. I'm always hesitant to jump into many FullStack projects or even do everything from the back end to the front end because sometimes it's daunting to learn a new language or setup. Thankfully, with Node.js and Express or Fastify, you can easily do a server setup and then pull in cool things to GraphQL if you want to try something similar to Express.