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

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 .

netnull · Accepted Answer · 2022-10-22 12:16:25Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related