apollo-file-upload 的 createUploadLink 无法使用凭据答案

【问题标题】：createUploadLink of apollo-file-upload not working with credentialsapollo-file-upload 的 createUploadLink 无法使用凭据
【发布时间】：2021-08-01 18:31:42
【问题描述】：

我已经设置了 apollo-file-upload 并一直在工作，直到我添加了凭据选项以便在浏览器中接受并拥有 cookie，但结果是在 fireFox 中设置的 cookie 崩溃，并且在 chrome 中没有设置 cookie 时崩溃：

阿波罗客户端：

import { createUploadLink } from 'apollo-upload-client'

const link = createUploadLink({
  uri: 'http://localhost:4000/graphql',
  credentials: 'include'
})

const client  = new ApolloClient({
  link,
  cache: new InMemoryCache()
})

阿波罗服务器：

 app.use(session({
  store,
  name: SESS_NAME,
  secret: SESS_SECRET,
  resave: false,
  saveUninitialized: false,
  cookie: {
    maxAge: SESS_LIFETIME,
    sameSite: 'none',
    httpOnly: true
  }
}))

const apolloServer = new ApolloServer({
  typeDefs,
  resolvers,
  playground: {
    settings: {
      'request.credentials': 'include'
    }
  },
  cors: corsOptions,
});

apollo-server 响应错误：

未处理的拒绝（错误）：获取失败 46 | // 在给定 GraphQLError 的情况下构造 ApolloError 的实例 47 | // 或网络错误。请注意，其中之一必须是有效的 48 | // 值或构造的错误将毫无意义。

49 |构造函数（{ | ^ 50 | graphQLErrors， 51 |网络错误， 52 |错误消息，

【问题讨论】：

标签： reactjs google-chrome cookies file-upload apollo-client

【解决方案1】：

我工作得很好。

import { ApolloClient, InMemoryCache} from "@apollo/client";
import { createUploadLink } from "apollo-upload-client";

const link = createUploadLink({
    uri: "http://localhost:4000/graphql",
    credentials: "include"
})
const client = new ApolloClient({
    cache: new InMemoryCache(),
    link
});

尝试使用 cookie-parser 并将其添加到您的 cors 选项中，如果您正在使用它，只需在 apollo-server-express 中将 cors 设置为 false。

const corsOptions= {
   origin: "http://localhost:3000" // full uri of client.
   credentials: true // make sure to add this.
}

server.applyMiddleware({ app, path: "/graphql", cors: false });

而且，不要忘记在您的服务器中使用 graphqlUploadExpress() 中间件。如果你想通过 graphql 上传文件，请参考 docs 或查看 this video。

【讨论】：