Здравствуйте. 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()
})
Помогите пожалуйста исправить данную ошибку, возможно у кого-то были подобные ошибки