Cannot upload files on Laravel server with Vue Apollo

Viewed 16

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

0 Answers
Related