Forem: 尤川豪

Test post 2

尤川豪 — Sun, 19 May 2024 01:50:20 +0000

This is a testing post

Test post 1

尤川豪 — Sun, 19 May 2024 01:50:12 +0000

this is a testing post

My freelancing experience with Laravel + GraphQL Part 2: How to use Query/Mutation in frontend with React.js

尤川豪 — Mon, 20 Nov 2023 02:45:03 +0000

In the previous article, I introduced the strength of GraphQL and how to implement it in Laravel

Let's talk about how to use it in frontend with React.js today!

Example project and API playground

I implemented an e-commerce sample project with graphql + laravel in the previous post

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

I created a simple e-commerce frontend with Next.js this time

https://graphql-react-example.vercel.app/

You can browse products & subscribe the newsletter in the web app!

For graphql query sample code:

https://github.com/howtomakeaturn/graphql-react-example/blob/main/app/page.js

For graphql mutation sample code:

https://github.com/howtomakeaturn/graphql-react-example/blob/main/app/newsletter.js

I use the native fetch function to call graphql api, so you should be able to do it with any http libraries.

And I use swr library (Next.js official library) as state manager, but any state manager should be fine.

Strengths

The best part about graphql is frontend devs can decide what data should be returned!

Frontend devs can try & see the results with the powerful graphql playground

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

Even relational data can be returned easily!

const gql = `query {
  products {
    id
    name
    description
    featured_image
    price
    comments {
      content
      user {
        name
      }
    }
  },
}`;

It reduces devlopment time and communication time a lot!

Source code

React source code

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

Laravel backend sample project

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

Laravel backend source code

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

Conclusions

With the above example projects,

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

I will realease more sample code in the following articles, you should definitely give graphql a try!

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

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

尤川豪 — Thu, 02 Nov 2023 02:27:57 +0000

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

test mention feature

尤川豪 — Thu, 27 Apr 2023 02:25:08 +0000

@howtomakeaturn

@test

@testtest333

test post

尤川豪 — Thu, 14 Feb 2019 10:53:00 +0000

haha

this is a testing post