My webapp is based on Laravel and the front-end is build with Vue 3 and Vite. I'm using lighthouse as a graphQl server side and Vue Apollo for the Vue part. I'm trying to upload files on my server but I get the following error:
Uncaught (in promise) Error: Variable "$avatar" got invalid value "C:\fakepath\logo_blue.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\logo_blue.png\
my graphQL mutation on the server looks like that
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"])
detail: CreateUserDetailHasOne
}
input updateUserInput {
id: ID!
username: String @rules(apply: ["min:2"])
email: String @rules(apply: ["email", "unique:users,email"])
password: String @hash @rules(apply: ["min:2"])
detail: CreateUserDetailHasOne
}
input updateOnlyUserDetailInput {
id: ID!
username: String @rules(apply: ["min:2"])
password: String @hash @rules(apply: ["min:2"])
}
input CreateUserDetailHasOne {
connect: ID
create: CreateUserDetail
update: UpdateUserDetail
delete: ID
}
input CreateUserDetail {
user_id: String
active: Boolean! @rules(apply: ["required"])
user_type: String! @rules(apply: ["required"])
avatar: Upload
firstname: String @rules(apply: ["min:2"])
lastname: String @rules(apply: ["min:2"])
address: String @rules(apply: ["min:8"])
postal_code: String @rules(apply: ["min:5"])
city: String @rules(apply: ["min:2"])
country: String @rules(apply: ["min:2"])
phone: String @rules(apply: ["min:9"])
kind_of_business: String @rules(apply: ["min:5"])
which_city: String @rules(apply: ["min:5"])
period_of_interest: String @rules(apply: ["min:5"])
suggestions: String @rules(apply: ["min:5"])
fiscal_code: String @rules(apply: ["min:9"])
piva: String @rules(apply: ["min:8"])
company_name: String @rules(apply: ["min:8"])
registered_office: String @rules(apply: ["min:8"])
}
input UpdateUserDetail {
id: ID!
active: Boolean
user_type: String @rules(apply: ["min:2"])
avatar: Upload
firstname: String @rules(apply: ["min:2"])
lastname: String @rules(apply: ["min:2"])
address: String @rules(apply: ["min:8"])
postal_code: String @rules(apply: ["min:5"])
city: String @rules(apply: ["min:2"])
country: String @rules(apply: ["min:2"])
phone: String @rules(apply: ["min:9"])
kind_of_business: String @rules(apply: ["min:5"])
which_city: String @rules(apply: ["min:5"])
period_of_interest: String @rules(apply: ["min:5"])
suggestions: String @rules(apply: ["min:5"])
fiscal_code: String @rules(apply: ["min:9"])
piva: String @rules(apply: ["min:8"])
company_name: String @rules(apply: ["min:8"])
registered_office: String @rules(apply: ["min:8"])
}
extend type Mutation {
addUser(input: addUserInput! @spread): User @create
updateUser(input: updateOnlyUserDetailInput! @spread): User @update
deleteUser(id: ID!): User @delete
updateDetail(input: UpdateUserDetail! @spread): UserDetail @update
}
and the GraphQL mutation class
<?php
namespace App\GraphQL\Mutations;
class UpdateDetail
{
/**
* @param null $_
* @param array<string, mixed> $args
*/
public function __invoke($root, array $args): ?string
{
$file = $args['avatar'];
return $file->storePublicly('avatars');
}
}
How to make it working? The Vue Apollo documentation does not help me much
Thank you to anyone who'll help me. I don't know how to solve it...
Valerio