如何解决使用apollo / graphql将文件上传到mongodb数据库
我想将文件上传到具有Apollo突变的mongodb数据库。 这是我的一些配置: server.js(在端口4000上):
...
// Connect to Mongo
mongoose
.connect(process.env.mongoURI,{
useNewUrlParser: true,useCreateIndex: true,useUnifiedTopology: true,useFindAndModify: false
}) // Adding new mongo url parser
.then(() => console.log('MongoDB Connected...'))
.catch(err => console.log(err));
const { ApolloServer } = require('apollo-server-express');
const typeDefs = require('./modules/graphqlschemas/index');
const resolvers = require('./modules/resolvers/index');
// #5 Initialize an Apollo server
const server = new ApolloServer({
typeDefs: typeDefs,resolvers: resolvers,context: ({ req }) => ({
getUser: () => req.user,logout: () => {
req.session = null;
req.logout();
return true
}
})
});
...
现在我的模式和解析器:
graphqlschemas / image.js
module.exports = `
type File {
_id: ID!
path: String!
filename: String!
mimetype: String!
encoding: String!
},type Query {
uploads: [File]
},type Mutation {
singleUpload(file: Upload!): File!
}
`;
resolvers / image.js(这是我观察到的非常重要的事情,那里的文件始终为null)
const Image = require('../../models/image');
module.exports = {
Query: {
uploads: (parent,args) => Image.find({}),},Mutation: {
singleUpload: async (parent,{file}) => {
console.log(file); // always null
}
}
}
,但让我们更进一步了解客户端(端口3000上的React app):
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { ApolloProvider } from '@apollo/react-hooks';
import ApolloClient from "apollo-boost";
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createUploadLink } from 'apollo-upload-client';
import { onError } from "apollo-link-error";
import { ApolloLink } from "apollo-link";
// const link = createUploadLink({ uri: '/graphql' });
const client = new ApolloClient({
link: ApolloLink.from([
// Report errors to console in a user friendly format
onError(({ graphQLErrors,networkError }) => {
if (graphQLErrors)
graphQLErrors.map(({ message,locations,path }) =>
console.log(
`[GraphQL error]: Message: ${message},Location: ${locations},Path: ${path}`
)
);
if (networkError) console.log(`[Network error]: ${networkError}`);
}),createUploadLink({
uri: '/graphql'
})
]),cache: new InMemoryCache()
});
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,document.getElementById('root')
);
serviceWorker.unregister();
变异查询(我正在使用codgen生成graphql钩子):
mutation SingleUpload($file: Upload!) {
singleUpload(file: $file) {
_id
filename
}
}
和带有组件的文件上传(最重要的几行):
const [fileData,setFileData] = useState(null);
const [singleUpload] = useSingleUploadMutation();
const onChangeFile = e => {
setFileData(e.target.files[0]);
};
console.log(fileData);
const onChangeText = e => {
setNewsData({
...newsData,[e.target.name]: e.target.value
});
}
const onSubmit = async e => {
e.preventDefault();
await singleUpload({ variables: { file: fileData } });
}
return (
<form id="addNews" onSubmit={onSubmit}>
<div className="form-group">
<input id="news" type="file" name="news" placeholder="Add photo" onChange={onChangeFile} />
</div>
<div className="form-group mt-4 mb-0">
<input type="submit" className="btn btn-primary btn-block" value="Add photo"/>
</div>
</form>
)
,但是在解析器中等于null,那么也许是问题所在吗?
解决方法
在graphql操场上肯定会遇到问题,因为我传递了一个字符串,但我也得到了这个字符串:
,“ ...“不支持'Upload'标量文字。” 这很奇怪,因为我读到如果我不使用makeExecutableSchema,则apollo服务器应该在没有任何额外代码的情况下进行设置。那里有什么变化吗?
问题解决了。 似乎apollo-boost软件包不支持上传文件。 我改变了:
从“ apollo-boost”导入ApolloClient;
上
从“ apollo-client”导入ApolloClient;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。