Das Hochladen von Dateien durch Vue Apollo führt zum Absturz des Knotens und die Aufrufstapelgröße überschreitet die maximale Grenze von _openReadFs

Question

Ich versuche, mit Apollo-boost-upload ein GraphQL-Datei-Upload-Frontend einzurichten. Der Backend-Code basiert auf diesem Link https://dev.to/dnature/handling-file-uploads-with-apollo-server-2-0-14n7. Nach dem Hinzufügen der folgenden Zeilen in der Datei server.js ist der Parser-Haltepunkt nun erreicht

const { apolloUploadExpress } = require("apollo-upload-server");

app.use(apolloUploadExpress({ maxFileSize: 1000000000, maxFiles: 10 }));

Nachdem die Struktur des Upload-Typs geändert wurde

scalar Upload

Dies ist eine Vue-Komponente

 <input
    type="file"
    style="display:none"
    ref="fileInput"
    accept="image/*"
    @change="upload"
>

//Upload method 
  upload({ target: { files = [] } }) {
        if (!files.length) {
          return;
        }
        this.logoImage = files[0];
      },

//Dispatching action from vue component

this.$store.dispatch("uploadLogo", { image: this.logoImage });

//Vuex action
const uploadLogo = async (context, payload) => {
  context.commit("setLoading", true);
  try {
    const { data } = await apolloClient.mutate({
      mutation: UPLOAD_LOGO,
      variables: {file: payload.image},
      context: {
        hasUpload: true,
      },
    });
    context.commit("setLoading", false);
    console.log("Logo:", data.uploadLogo);
  } catch (error) {
    context.commit("setLoading", false);
    console.log(error);
  }
};

//Mutation
export const UPLOAD_LOGO = gql`
  mutation uploadLogo($file: Upload!) {
    uploadLogo(file: $file) {
      _id
      path
      filename
      mimetype
      user {
        _id
      }
    }
  }
`;


// Apolloclient config on main.js

import ApolloClient from "apollo-boost-upload";

import { InMemoryCache } from "apollo-boost";
import VueApollo from "vue-apollo";


// Set up Apollo Client
export const defaultClient = new ApolloClient({
  uri: "http://localhost:4000/graphql",
  cache: new InMemoryCache({
    addTypename: false,
  }),
 
  fetchOptions: {
    credentials: "include",
  },
  request: (operation) => {
    // if no token in local storage, add it
    if (!localStorage.someToken) {
      localStorage.setItem("someToken", "");
    }
    // operation adds the token to authorizatrion header, which is sent o backend
    operation.setContext({
      headers: {
        authorization: "Bearer " + localStorage.getItem("someToken"),
      },
    });
  },
  onError: ({ graphQLErrors, networkError }) => {
    if (networkError) {
      console.log("[networkError]", networkError);
    }
    if (graphQLErrors) {
      for (const error of graphQLErrors) {
        console.dir(error);
        if (error.name === "AuthenticationError") {
          // set auth errir in state
          store.commit("setError", error);
          // signout user to clear error
          store.dispatch("signUserOut");
        }
      }
    }
  },
});

Hier ist die aktualisierte Typdefinition für das Backend (alter Code auskommentiert), falls dies zur Identifizierung des Problems beiträgt

const logoUploadTypeDefs = gql`
  type File {
    _id: ID!
    path: String!
    filename: String!
    mimetype: String!
    encoding: String!
    user: User
  }

  # input Upload {
  #   name: String!
  #   type: String!
  #   size: Int!
  #   path: String!
  # }

  scalar Upload

  type Mutation {
    uploadLogo(file: Upload!): File
  }
  type Query {
    info: String
    logo: File!
  }
`;

Jetzt stürzt die Node-Anwendung mit dem folgenden Protokoll ab

Answer 1

我必须将“apollo-upload-server”更改为“graphql-upload”

更改 1：

注释掉“apollo-upload-server”并使用“graphql-upload”

// const { apolloUploadExpress } = require("apollo-upload-server");]
const {
  graphqlUploadExpress, // A Koa implementation is also exported.
} = require("graphql-upload");

在中间件中，使用了这个

更改 2：

app.use(graphqlUploadExpress());
await apolloServer.start();

代替旧代码

app.use(apolloUploadExpress());// Not to be used
await apolloServer.start();

另外，在解析器中，我添加了这个

更改3：

从解析器文件中的 graphql-upload 导入 Upload

const { GraphQLUpload } = require("graphql-upload");

....
....

const resolvers = {
  // This maps the `Upload` scalar to the implementation provided
  // by the `graphql-upload` package.
  Upload: GraphQLUpload,
  Query: {
      ....
   }
  Mutations: {
      ....
  }

}

请参阅 Apollo 文档了解更多详细信息。这修复了节点崩溃并出现错误“_openReadFs 超出最大调用堆栈大小...”的问题