Uploading Image In Laravel Lighthouse GraphQL

Installment

After creating a fresh Laravel application, the next step is to install nuwave/lighthouse to enable the use of Lighthouse. For more information on how to install Lighthouse, please check out this link

Laravel 9 GraphQL API CRUD Tutorial Example

Single Image Upload

Open your graphql/schema.graphql and add the following :

scalar Upload
  @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\Upload")

extend type Query{
  "collection of user"
  users: [User!]!  @paginate
  "user find by id"
  user(id: ID @eq ): User @find



}



 extend type Mutation {

"Single File Upload in Single Input"
  upload(image: Upload!,id: ID): String


}



type User{
  id: ID,
  name: String,
  email: String,
  email_verified_at: String ,
 
  profile_photo_path: String,
}

Create a mutation

php artisan lighthouse:mutation Upload

<?php

namespace App\GraphQL\Mutations;

use App\Models\User;

final class Upload
{
    /**
     * @param  null  $_
     * @param  array{}  $args
     */
    public function __invoke(mixed $root, array $args): ?string
    {
        /** @var \Illuminate\Http\UploadedFile $file */
       
        $file = $args['image']; 
       
       $path= $file->storePublicly('uploads');
        $user=User::find($args['id']);
        $user->update(['profile_photo_path'=>$path]);
        return $user;
    }
}

Open your postman and add the following :

If you are unsure about the key operations and their values, you can refer to the entire query for clarification.

{"query":"mutation MyMutation($file: Upload!) { upload(image:$file,id:1)} "}

Multiple Image Upload

Open your graphql/schema.graphql and add the following :

scalar Upload
  @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\Upload")

extend type Query{
  "collection of user"
  images: [Image!]!  @all
  "user find by id"
  image(id: ID @eq ): Image @find

 

}



 extend type Mutation {
"Multiple Upload in a single input"
  BulkImageUpload(images: [Upload]!,id:ID):String

}

type Image{
  id: ID,
  image:String,
  user:User @belongsTo,


}

Create a mutation

php artisan lighthouse:mutation BulkImageUpload

If you are unsure about the key operations and their values, you can refer to the entire query for clarification.

 {"query": "mutation MyMutation($files: [Upload]!) { BulkImageUpload(images: $files,id:1)  }"}

Single file upload into multiple input names

Open your graphql/schema.graphql and add the following :

scalar Upload
  @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\Upload")

extend type Query{
  "collection of user"
  users: [User!]!  @paginate
  "user find by id"
  user(id: ID @eq ): User @find



}



 extend type Mutation {

"Single file upload into multiple input names"
    MultipleImageUpload(profile_photo_path: Upload!,avatar_path: Upload!,id:ID): String


}



type User{
  id: ID,
  name: String,
  email: String,
  email_verified_at: String ,
 profile_photo_path: String,
  avatar_path: String
}

Create a mutation

php artisan lighthouse:mutation MultipleImageUpload

If you are unsure about the key operations and their values, you can refer to the entire query for clarification.

{"query":"mutation MyMutation($profile_photo_path: Upload!,$avatar_path: Upload!) { MultipleImageUpload(profile_photo_path:$profile_photo_path,avatar_path:$avatar_path,id:2)} "}