使用apollo / graphql将文件上传到mongodb数据库

编程问答 2022-08-23

问题描述

我想将文件上传到具有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>
)

fileData看起来像这样：

file

，但是在解析器中等于null，那么也许是问题所在吗？

解决方法

在graphql操场上肯定会遇到问题，因为我传递了一个字符串，但我也得到了这个字符串：

“ ...“不支持'Upload'标量文字。” 这很奇怪，因为我读到如果我不使用makeExecutableSchema，则apollo服务器应该在没有任何额外代码的情况下进行设置。那里有什么变化吗？

,

问题解决了。 似乎apollo-boost软件包不支持上传文件。 我改变了：

从“ apollo-boost”导入ApolloClient；

上

从“ apollo-client”导入ApolloClient；

apollofile-uploadgraphqljavascriptmongodb