Lighthouse: Clear documentation on file upload with example for vue

[wolfiton]

https://lighthouse-php.com/3.1/guides/file-uploads.html
https://lighthouse-php.com/3.1/guides/file-uploads.html#client-side-usage
Willing to offer some code so that an example can be created for this.

What problem does this feature proposal attempt to solve?
This feature will ensure that everybody can use comfortably the upload feature of php lighthouse

Which possible solutions should be considered?
Implementing a simple full example of an image upload with vue and vue apollo step by step.

There are no solutions to this problem at the moment.

Thank you for looking over this proposal.

[spawnia]

Nice suggestion. If there is something good out there, I would prefer to include links to official documentation.

[wolfiton]

There is no example unfortunately for this.

So if i provide some starting code vue apollo implementation, a form for upload and a simple backend for php lighthouse would you be willing @spawnia to look it over and together find a way to make it work?

Thanks in advance

[lorado]

I also have vue + apollo in my project, so I could also help with an upload example. Make a PR to let us start, and we will see, what we can do together ;)

[wolfiton]

I also have vue + apollo in my project, so I could also help with an upload example. Make a PR to let us start, and we will see, what we can do together ;)

I would like to ask some questions before i make my pr:
Where should i put it in the repo? EX: create a folder examples/upload-vue-example?
Would if be ok if I create the vue project inside the laravel lighthouse project? EX: vue-apollo-upload - laravel code and inside vue-apollo-client-upload.- vue code

I will provide the pr tomorrow.

Thanks in advance

[spawnia]

An example project seems way overkill. A few focused snippets in https://github.com/nuwave/lighthouse/blob/master/docs/master/digging-deeper/file-uploads.md should suffice.

[wolfiton]

An example project seems way overkill. A few focused snippets in https://github.com/nuwave/lighthouse/blob/master/docs/master/digging-deeper/file-uploads.md should suffice.

To be able to offer a snippet we first need a working example and for that, we need the 2 frameworks in a working state.
So I propose to create the example on my GitHub personal page under mit and credit everybody that wants to help with this example.

After we have a functional example we can add the snippets to the docs.

Does everyone agree with this idea?

Thanks in advance

[lorado]

Well, having a whole working example is nice, but I would place it in an extra repo anyway. So if people need it, they can dive into details in working example.

In lighthouse docs I also think that bunch of snippets should be enough. Maybe with small explanations on a side, why and what is happening.

[wolfiton]

So I would also like to ask if anybody has any opinions on what css framework to use or we could use an ui framework for this like:

• buefy
• https://bootstrap-vue.org/
• vuetify

Here is the project https://github.com/wolfiton/vue-upload

I am still adding to it:

lighthouse(done initial install)
vue-apollo(pending)
css-framework(what to choose?)

[lorado]

I would say - choose what you prefer. It is an example, where important parts are how to implement apollo with upload-link, doesn't matter what is used for css styling =)

[spawnia]

How about no CSS at all?

[wolfiton]

How about no CSS at all?

I already included this so that we can see more easily what data we are sending and have some basic errors.
https://bootstrap-vue.org/docs/components/card
I will push my chnges as soon as I create the getposts.gql query.

So I also created afactory to generate a post with images using facker so you can use
php artisan migrate --seed to have the same data as me.

Pushed all my changes to github master branch

[wolfiton]

Pushed everything on Github master branch.

The project is set up in the following way:

A simple post with tittle content image

Home has the GetPosts.gql query located in @/grapgql/queries/GetPosts.gql

Add Post is the form where we need the post mutation and upload feature, it has some basic vue form v-model

[wolfiton]

How about no CSS at all?

I can create an example with no css for the docs. Would that be a good idea?

[wolfiton]

Does Upload type only accept upload and nothing else?

Because i tried to use it like this:

input CreatePostInput {
    title: String!
    content: String!
# fails to make image of type Upload    
   image(file: Upload!): String
}

[spawnia]

@wolfiton that definition is not even valid GraphQL syntax. The fields of an input can not have arguments.

[wolfiton]

@wolfiton that definition is not even valid GraphQL syntax. The fields of an input can not have arguments.

So what is the correct way to implement this?

Thanks in advance

[lorado]

Something like this.

type Mutation {
    createPost(input: CreatePostInput! @spread): Post!
}

input CreatePostInput {
    title: String!
    content: String!    
    image: Upload!
}

Then in the field resolver:

/** @var \Illuminate\Http\UploadedFile $uploadedImage */
$uploadedImage = Arr::get($args, 'image');

[wolfiton]

here is mY resolver

<?php

namespace App\GraphQL\Mutations;

class Image
{
    /**
     * @param  null  $_
     * @param  array<string, mixed>  $args
     */
    public function __invoke($_, array $args)
    {
        $uploadedImage = Arr::get($args, 'image');

        return $uploadedImage->storePublicly('uploads');
    }
}

This should be it for the backend right?

Thanks for the help so far.

[spawnia]

I would simplify:

return $args['image']->storePublicly('uploads');

[wolfiton]

Found this but don't know how to use it because I have mutation for creating a post already. Do i need to add another one inside for upload?

https://dev.to/marvinrabe/file-upload-with-vue-apollo-client-and-graphql-5emb

Thanks

[wolfiton]

I would simplify:

return $args['image']->storePublicly('uploads');

Thanks it really makes it easier to read and understand what is happening using this short version.

[lorado]

If you want to call dedicated mutation for upload, then yes. But you also have to store the path returned by storePublicly() somewhere on the Post model.

In my opinion it is better to handle such mutations (data + file upload) within one resolver, so you don't have to create two different queries on the client, to store the data + file. But you then need to write a field resolver for createPost(...) mutation completely from scratch, so without using @create directive. Then you sure have to handle creating and filling Post model on your own.

Better way would be to use custom input resolver, but this may be way to difficult for beginners. I will probably add it later, as alternative to your example. The advantages of the custom arg resolvers - you can reuse input resolver in different places, and also use builtin field resolvers like @create. So on the one side you have to write an extra code, on the other side there are much benefits on using it.

[lorado]

Found this but don't know how to use it because I have mutation for creating a post already. Do i need to add another one inside for upload?

This is what I mean. If you handle it separately, you need an additional mutation like

uploadImageForPost(image: Upload!, post_id: ID!): Post!

And then there you have to find a Post model passed in post_id, and store the image path into the model.

[wolfiton]

Found this but don't know how to use it because I have mutation for creating a post already. Do i need to add another one inside for upload?

This is what I mean. If you handle it separately, you need an additional mutation like

uploadImageForPost(image: Upload!, post_id: ID!): Post!

And then there you have to find a Post model passed in post_id, and store the image path into the model.

This version will add another join that may be an overkill?

So using a mutation from sratch does it resemble a laravel 'Model::create(["title"=> $request->title])'?

Can you show me an example of an arg resolver or where i could find it in the docs?

Thanks

[lorado]

https://lighthouse-php.com/master/concepts/arg-resolvers.html

[wolfiton]

https://lighthouse-php.com/master/concepts/arg-resolvers.html

So what i understood from what i read is this:

I need two functions:

first, one to map the title and content to args and the second one to make the image upload.

My questions are:

Where does the args resolver gets created, does it have an artisan generator?
How can I extend the default create a directive to accommodate my 2 functions?

Thanks

I am singing out I will try tomorrow to continue this project.

Thanks again for all the help @lorado and @spawnia

[wolfiton]

The upload feature is finished but have an error of data undefined but the functionality is there.
Also the articles update once published using the fetch policy.

[spawnia]

You can add a link to your repo in the docs under resources

[wolfiton]

Ok, I will do that once I finish the whole project. I will extend the current one to a full-fledged blog.

Thanks @spawnia.