File upload

写真をアップロードするには、Uploadタイプを定義する必要があります.
ただし、apollo-serverを使用してschemaを作成すると、自動的にUploadタイプが定義されます.
ファイルをアップロードするには、グラウンドのほかに、他のクライアントも使用する必要があります.(テスト用)
https://altair.sirmuel.design/

グラウンドやaltairにスカラーがアップロードされていない場合
$ npm install [email protected]
アポロサーバをダウングレードする必要があります.
ユーザサーバにアップロード->aws->awsサーバにアップロードurlをサーバにスケール

Node 12以降でエラーが発生しました
解決策

// in pacage.json

"resolutions": {
        "fs-capacitor": "^6.2.0",
        "graphql-upload": "^11.0.0"
    },


"scripts": {
        "preinstall": "npx [email protected]",

node moduleの削除
npm i

Node jsファイルの処理

import {createWriteStream} from "fs";


// altire 에서 받은 파일에는 stream과 파일명이 있다.
const {filename, createReadStream} = await avatarURL;

// 받은 스트림으로 객체를 하나 만들어주고
   const readStream = createReadStream();
   
   // nodejs 에서 제공하는 write stream으로 객체를 만든다.
   // 매개변수로 path 를 지정해준다.
   const writeStream = createWriteStream(
       process.cwd() + "/uploads/" + filename
   );
   
// 파일을 읽고 파이프를 이용해 설정한 path로 파일을 이동시켜준다.   
readStream.pipe(writeStream);

しかし、http://localhost:4000/uploads/filenameに着いても、何も受け取れません.
アポロサーバはファイルの存在を知らないので
アポロサーバのみでurlを変更することはできません.(Graphqlサーバなので)
この問題を解決するために,expressサーバでアポロサーバを囲むのが一つの方法である.
apollo-server -> apollo-server-express
expressサーバを使用しますが、graphql urlではアポロサーバを使用します.

// in server.js

require("dotenv").config();
import express from "express";
import {ApolloServer, gql} from "apollo-server-express";
import morgan from "morgan";

import {resolvers, typeDefs} from "./schema";
import {getUser} from "./User/user.utils";

const PORT = process.env.PORT;

const apolloServerr = new ApolloServer({
   resolvers,
   typeDefs,
   context: async ({req}) => {
       return {
           loggedInUser: await getUser(req.headers.token),
       };
   },
});

const expressServer = express();
expressServer.use(morgan("dev"));
apolloServerr.applyMiddleware({app: expressServer});

expressServer.listen({port: PORT}, () =>
   console.log("Server is reunning http://localhost:4000")
);

expressで使ってもいいです.

上記のエラーが発生した場合.
$npm i [email protected]君を降格させる.

expressServer.use("/static", express.static("uploads"));

prismaにavatarUrlを保存する

  let avatar = null;
    if (avatarURL) {
        const {filename, createReadStream} = await avatarURL;
        const newFilename = `${loggedInUser.id}-${Date.now()}-${filename}`;
        const readStream = createReadStream();
        const writeStream = createWriteStream(
            process.cwd() + "/uploads/" + newFilename
        );
        console.log(newFilename);
        readStream.pipe(writeStream);
        avatar = `http://localhost:4000/static/${newFilename}`;
    }