DEV Community

Cover image for My freelancing experience with Laravel + GraphQL Part 1: Strengths, API playground, and tools intro (Sample code included!)
尤川豪
尤川豪

Posted on

My freelancing experience with Laravel + GraphQL Part 1: Strengths, API playground, and tools intro (Sample code included!)

Grpahql
In the past few months, I helped one of my clients to refactor their legacy laravel project into a SPA architecture.

We use GraphQL to get better DX (developer experience) and reduce communication cost between frontend devs and backend devs.

It turns out to be a huge success! The dev team is quite happy with the result!

Today I want to share some experiences & some sample code!

Strengths

My favorite part about graphql is that the communication between frontend devs and backend devs becomes much easier!

When the backend devs finish the backend part, graphql automatically generates API documentation & testing tools!

For better demonstration, I create a sample project on Github!

It's a simple e-commerce project, with products and comments in the API.

And users can subscribe to the newsletter, insert new data into the subscribers type!

Example project and API playground

The project link is here

https://graphql-laravel-example.tw/

The source code is here

https://github.com/howtomakeaturn/graphql-laravel-example


In graphql, for 'reading data' APIs, we call it 'query'

https://github.com/howtomakeaturn/graphql-laravel-example/tree/main/app/GraphQL/Queries

For 'updating data' APIs, we call it 'mutation'

https://github.com/howtomakeaturn/graphql-laravel-example/tree/main/app/GraphQL/Queries

Check out the above folders, you can see each API is a single file, makes its very easy to understand.

And then you can try out the powerful tool 'graphiql' - it provides documentation & testing tool at the same time!

https://graphql-laravel-example.tw/graphiql

I deploy a sample graphiql online so you can play with it directly!

This tool is my favorite thing in the graphql ecosystem!

Packages

There's two way of implementing api in graphql: schema-first and code-first.

For schema-frst with laravel, you can use

https://github.com/nuwave/lighthouse

For code-first with laravel, you can use

https://github.com/rebing/graphql-laravel

I won't mention the differences between the two ways here.

I personally prefer code-first philosophy. I think it's easier to understand & implement.

So I'll use https://github.com/rebing/graphql-laravel in the example project.

They both use https://github.com/webonyx/graphql-php as the fundamental components

So don't worry, they share the same core concepts!


Graphiql is a graphql official library.

Use https://github.com/mll-lab/laravel-graphiql to install it easily.

Conclusions

With the above packages & the example project I provided https://github.com/howtomakeaturn/graphql-laravel-example

You should be able to implement your own graphql APIs in your project!

I will realease more sample code in the following articles, so you won't get blocked by the advanced features with graphql!

(This is series article. More content will be released soon.)

Top comments (0)