Здравствуйте. ApolloError: Variable "$file" got invalid value {}; Upload value invalid

я получаю в React приложение такое уведомление(сверху проверяю свой файл через console.log)введите сюда описание изображения

Ошибка дает понять что Apolloclient не видит мой файл, вот код:

import React from 'react'
import {gql, useMutation} from "@apollo/client"

const UPLOAD_FILE = gql`
  mutation UploadFile($file: Upload!) {
    uploadFile(file: $file) {
      url
    }
  }
`

export default function Example() {
  const [UploadFile] = useMutation(UPLOAD_FILE, {
    onCompleted: (data) => console.log(data),
  })

  const handleFileChange = (e) => {
    const file = e.target.files[0]
    console.log(file)
    if (!file) return
    UploadFile({ variables: { file } })
  }
    return (
      <div>
        <h1>Upload File</h1>
        <input type="file" onChange={handleFileChange} />
      </div>
    )
}

возможно проблема в конфигурации клиента:

import {ApolloClient, InMemoryCache, ApolloProvider, createHttpLink} from '@apollo/client'
import { setContext } from '@apollo/client/link/context';
import { createUploadLink } from "apollo-upload-client";
import { ApolloLink } from '@apollo/client';
import { onError } from "apollo-link-error";

//http
const httpLink = createHttpLink({
  uri: "http://localhost:4000/graphql",
  credentials: 'include',
})
//error
const Errorlink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.forEach(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      )
    );
  if (networkError) console.log(`[Network error]: ${networkError}`);
});
//auth
const authLink = setContext((_, { headers }) => {
  //  const token = localStorage.getItem('token');
   return {
     headers: {
       ...headers,
       authorization: localStorage.getItem('token') || "",
     }
   }
 });
//new upload
const isFile = value =>
  (typeof File !== 'undefined' && value instanceof File) || (typeof Blob !== 'undefined' && value instanceof Blob);
const isUpload = ({ variables }) => Object.values(variables).some(isFile);
const uploadLink = createUploadLink({
  uri: process.env.REACT_APP_GRAPHQL_URL,
  credentials: 'include'
});
const terminatingLink = (isUpload, uploadLink, httpLink)

const link = ApolloLink.from([ Errorlink, authLink, terminatingLink ])

export const client = new ApolloClient({
  link,
  cache: new InMemoryCache()
})

Помогите пожалуйста исправить данную ошибку, возможно у кого-то были подобные ошибки


Ответы (0 шт):