Building a graphql app from zero to hero using node JS and vue.js part 1
Over the past few weeks while exposing myself to the amazing graphql query language, I discovered there are few materials that guide you on how to use the query language with Vue.JS. I decided to come up with one to teach all I have learned. I hopes it helps .
what is graphQL ?.
GraphQL was introduce by Facebook and made open source in 2015, Which is a query language used for querying your server in other to help solve the problem of over and under fetching of data, in other to use low bandwidth on your client side of your application and others .
First we would be setting up a simple graphql server which we would require the following dependencies to start. Create a folder and name it fullstack and a sub folder called server then change to the folder dir (server) and run the following command.
“npm init -y”
We initialize a package.json file in your server folder with a default setting, to install the required dependencies for the project to run.
“npm i — save express cors morgan body-parser apollo-server-express graphql-tools mongoose graphql “
When we start using any of the dependencies I would explain the use. You must have noticed a folder called node_modules which is as a result of the dependencies you installed. Create a file called server.js and add this code to it.
Here we required some of the dependencies we installed like cors which will allow any other domain to be able to access the endpoint, morgan a logger for express app while body-parser which would allow us to parse input data as json format, we then required graphqlexpress and graphiqlexpress from apollo-server-express, apollo server express has made it easy for setting up a graphql server, lets try running our server and go to localhost:10101 we would get an error showing:
which means we don’t have a schema. Schema is a set of instructions which is use to query the data, from data source(DATABASE). In other to fix this, lets create a folder called graphql that has three files: index.js, typeDefs.js and resolvers.js. Go to the typeDefs.js file.
The Type List tells graphql that we would have a data of List with the following properties: id, title and owner, the “!” attach to the data type; which means the field is required. Then we create a query type which shows how we want to query data from the Data source. We export the template literal, so we can use it to create a schema.
Here we are creating a resolver. A Resolver is a means we use to get data form the data source. In the case we are using it to resolve data following the rules given in our query in typeDefs.js. Though we are not connecting to a real database yet. We export the object which we would used to make an executable schema using graphql-tools.
This returns a graphql schema from the resolvers and typeDefs which we created a while ago. The graphqlschema would be used to create a schema in other to solve the error we encountered. Lets do the final fixing by requiring the schema to our server.js and update the app to use the schema in the graphql middleware.
I believe the error should be gone by now so let test our graphql API by going to localhost:10101/graphiql
VOILA!! it worked. We were able to search for all the items in our list and a single item. In the next part we would connect to a real database and add mutation to our typeDefs .
continue to the next part here
Please don’t forget to clap and share with your friends, thanks.