使用 apollo/graphql 上傳文件到 mongodb 數據庫

Question

我想通過 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
    }
  }
}

，但是讓我們將 go 進一步發送到客戶端（在端口 3000 上反應應用程序）：

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，所以這可能是問題所在？

Answer 1

在 graphql 操場上，我肯定會遇到問題，因為我傳遞了一個字符串，但我也得到了這個：

“...'上傳'標量文字不受支持。” 這很奇怪，因為我讀到如果我不使用 makeExecutableSchema，apollo 服務器應該在沒有任何額外代碼的情況下設置它。 那里有什么改變嗎？

Answer 2

問題解決了。 看來 apollo-boost package 不支持上傳文件。 我變了：

從“apollo-boost”導入 ApolloClient；

上

從“apollo-client”導入 ApolloClient；