Laravel/Lighthouse, Graphql, Vue3: File Upload doesn't work - graphql

Question

I'm trying to upload a file in my Vue3 (Vite) project using graph-QL, Apollo and Lighthouse but the documentation doesn't help me much.
I followed all instructions written in the official lighthouse upload file section adding the scalar and the mutation.
scalar Upload
#scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\Upload")
Changed the schema so that the avatar field is of Upload type
type User {
id: ID!
username: String!
email: String!
password: String!
email_verified_at: Date
active: Boolean!
user_type: UserType!
avatar: Upload ...
And set the mutation
input addSupplierInput {
active: Boolean
username: String #rules(apply: ["required", "min:5", "max:20"])
email: String #rules(apply: ["required", "email", "unique:users,email"])
password: String! #hash #rules(apply: ["required", "min:2"])
active: Boolean! #rules(apply: ["required"])
user_type: String! #rules(apply: ["required"])
avatar: Upload
Created the Upload mutation in Laravel app/GraphQL/Mutations
class Upload
public function __invoke($_, array $args)
{
$file = $args['avatar'];
return $file->storePublicly('uploads');
}
When I try to upload the file through the form I get the following error in console:
Uncaught (in promise) Error: Variable "$avatar" got invalid value "C:\fakepath\Schermata 2022-10-20 alle 12.37.53.png"; Expected type Upload; Could not get uploaded file, be sure to conform to GraphQL multipart request specification: https://github.com/jaydenseric/graphql-multipart-request-spec Instead got: C:\fakepath\Schermata 2022-10-20 alle 12.37.53.png
As far I understand I've to do something of a client side multipart file specification but I don't find any solution for Vue.js (or I don't understand what to do).
Please, any help will be appreciated. I'm simply getting crazy and I don't find any paper/video in internet that can help me .

Answer 1

I finally found the solution.
I've followed this article here, installed the apollo-upload-client package, updated the main.js file removing the createHttpLink and saved the file.
main.js BEFORE
import {
ApolloClient,
createHttpLink,
InMemoryCache,
} from '#apollo/client/core';
// HTTP connection to the API
const httpLink = createHttpLink({
uri: 'http://localhost/graphql',
});
// Cache implementation
const cache = new InMemoryCache();
// Create the apollo client
const apolloClient = new ApolloClient({
link: httpLink,
cache,
});
main.js AFTER
import { ApolloClient, InMemoryCache } from '#apollo/client/core';
import { createUploadLink } from 'apollo-upload-client';
// Cache implementation
const cache = new InMemoryCache();
// Create the apollo client
const apolloClient = new ApolloClient({
link: createUploadLink({
uri: 'http://localhost/graphql',
}),
cache,
});
I just wonder why this solution doesn't appear on the official documentation.