# Install the Atlas CLI
% brew install mongodb-atlas
% atlas

# Update the Atlas CLI
% brew update
% brew upgrade mongodb-atlas
% atlas --version

# 1. Run the authentication command
% atlas auth login

# 2. Sign into Atlas.
# If you aren't signed in already, sign into your Atlas account in the browser.

# 3. Enter the authorization code.
# Paste your activation code into the browser and click Confirm Authorization.

# 4. Return to the Atlas CLI.
# Return to the terminal. If you connect successfully, you see a message:

# Successfully logged in as {Your Email Address}.

# 1. https://www.mongodb.com/docs/database-tools/installation/installation-macos/#install-homebrew
# 2. https://www.mongodb.com/docs/database-tools/installation/installation-macos/#tap-the-mongodb-formula
% brew tap mongodb/brew
# 3. https://www.mongodb.com/docs/database-tools/installation/installation-macos/#install-the-mongodb-database-tools
% brew install mongodb-database-tools
# 4. https://www.mongodb.com/docs/database-tools/installation/installation-macos/#run-the-installed-tools

# Run your connection string in your command line
# Use this connection string in your application:
% mongosh "mongodb+srv://cluster0.tbegt85.mongodb.net/myFirstDatabase" --apiVersion 1 --username denham

mongodb+srv://denham:<password>@cluster0.tbegt85.mongodb.net/?retryWrites=true&w=majority

const { MongoClient, ServerApiVersion } = require('mongodb');
const uri = "mongodb+srv://denham:<password>@cluster0.tbegt85.mongodb.net/?retryWrites=true&w=majority";
const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true, serverApi: ServerApiVersion.v1 });
client.connect(err => {
  const collection = client.db("test").collection("devices");
  // perform actions on the collection object
  client.close();
});

% show dbs

% brew tap mongodb/brew
% brew update
% brew install mongodb-community@6.0

% brew services start mongodb-community@6.0

% mongosh

mongodb+srv://<ユーザー名>:<password>@cluster0.tbegt85.mongodb.net/<データベース名>

mongodb://localhost:27017/<データベース名>

{
  ...
  "devDependencies": {
+    "@types/graphql": "14.5.0",
    "@types/node": "^18.15.11",
    "prisma": "^4.12.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.0.2"
  },
  "dependencies": {
+    "@apollo/client": "3.7.10",
+    "@pothos/plugin-prisma": "3.47.2",
+    "@pothos/core": "3.29.0",
    "@prisma/client": "^4.12.0",
+    "graphql": "16.6.0",
+    "graphql-scalars": "1.21.3",
+    "graphql-yoga": "3.8.0"
  },
+  "prisma": {
+    "seed": "ts-node prisma/seed.ts"
+  }
}

{
  "name": "my-blog",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "license": "MIT",
  "author": "",
  "devDependencies": {
    "@types/graphql": "14.5.0",
    "@types/node": "^18.15.11",
    "prisma": "^4.12.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.0.2"
  },
  "dependencies": {
    "@apollo/client": "3.7.10",
    "@pothos/plugin-prisma": "3.47.2",
    "@pothos/core": "3.29.0",
    "@prisma/client": "^4.12.0",
    "graphql": "16.6.0",
    "graphql-scalars": "1.21.3",
    "graphql-yoga": "3.8.0"
  },
  "prisma": {
    "seed": "ts-node prisma/seed.ts"
  }
}

npx prisma init

npx prisma format

npx prisma db push

npx prisma generate

✔ Generated Prisma Client (4.12.0 | library) to ./node_modules/@prisma/client in 98ms

✔ Generated Pothos integration to ./node_modules/@pothos/plugin-prisma/generated.ts in 15ms
You can now start using Prisma Client in your code. Reference: https://pris.ly/d/client

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

npx prisma db seed

npx prisma studio

import { createYoga } from "graphql-yoga";
import SchemaBuilder from "@pothos/core";
import PrismaPlugin from "@pothos/plugin-prisma";
import { DateTimeResolver } from "graphql-scalars";

import type PrismaTypes from "@pothos/plugin-prisma/generated";
import type { NextApiRequest, NextApiResponse } from "next";

import prisma from "../../lib/prisma";

const builder = new SchemaBuilder<{
  PrismaTypes: PrismaTypes;
}>({
  plugins: [PrismaPlugin],
  prisma: {
    client: prisma,
  },
});

builder.queryType({});

builder.mutationType({});

builder.prismaObject("User", {
  fields: (t) => ({
    id: t.exposeID("id"),
    email: t.exposeString("email"),
    name: t.exposeString("name", { nullable: true }),
    posts: t.relation("posts"),
  }),
});

builder.prismaObject("Post", {
  fields: (t) => ({
    id: t.exposeID("id"),
    title: t.exposeString("title"),
    content: t.exposeString("content", { nullable: true }),
    published: t.exposeBoolean("published"),
    author: t.relation("author"),
  }),
});

builder.queryField("feed", (t) =>
  t.prismaField({
    type: ["Post"],
    resolve: async (query, _parent, _args, _info) =>
      prisma.post.findMany({
        ...query,
        where: { published: true },
      }),
  })
);

builder.queryField("post", (t) =>
  t.prismaField({
    type: "Post",
    args: {
      id: t.arg.id({ required: true }),
    },
    nullable: true,
    resolve: async (query, _parent, args, _info) =>
      prisma.post.findUnique({
        ...query,
        where: {
          id: String(args.id),
        },
      }),
  })
);

builder.queryField("drafts", (t) =>
  t.prismaField({
    type: ["Post"],
    resolve: async (query, _parent, _args, _info) =>
      prisma.post.findMany({
        ...query,
        where: { published: false },
      }),
  })
);

builder.queryField("filterPosts", (t) =>
  t.prismaField({
    type: ["Post"],
    args: {
      searchString: t.arg.string({ required: false }),
    },
    resolve: async (query, _parent, args, _info) => {
      const or = args.searchString
        ? {
            OR: [
              { title: { contains: args.searchString } },
              { content: { contains: args.searchString } },
            ],
          }
        : {};
      return prisma.post.findMany({
        ...query,
        where: { ...or },
      });
    },
  })
);

builder.mutationField("signupUser", (t) =>
  t.prismaField({
    type: "User",
    args: {
      name: t.arg.string({ required: false }),
      email: t.arg.string({ required: true }),
    },
    resolve: async (query, _parent, args, _info) =>
      prisma.user.create({
        ...query,
        data: {
          email: args.email,
          name: args.name,
        },
      }),
  })
);

builder.mutationField("deletePost", (t) =>
  t.prismaField({
    type: "Post",
    args: {
      id: t.arg.id({ required: true }),
    },
    resolve: async (query, _parent, args, _info) =>
      prisma.post.delete({
        ...query,
        where: {
          id: String(args.id),
        },
      }),
  })
);

builder.mutationField("publish", (t) =>
  t.prismaField({
    type: "Post",
    args: {
      id: t.arg.id({ required: true }),
    },
    resolve: async (query, _parent, args, _info) =>
      prisma.post.update({
        ...query,
        where: {
          id: String(args.id),
        },
        data: {
          published: true,
        },
      }),
  })
);

builder.mutationField("createDraft", (t) =>
  t.prismaField({
    type: "Post",
    args: {
      title: t.arg.string({ required: true }),
      content: t.arg.string(),
      authorEmail: t.arg.string({ required: true }),
    },
    resolve: async (query, _parent, args, _info) =>
      prisma.post.create({
        ...query,
        data: {
          title: args.title,
          content: args.content,
          author: {
            connect: { email: args.authorEmail },
          },
        },
      }),
  })
);

const schema = builder.toSchema();

export default createYoga<{
  req: NextApiRequest;
  res: NextApiResponse;
}>({
  schema,
  graphqlEndpoint: "/api/graphql",
});

export const config = {
  api: {
    bodyParser: false,
  },
};

// データをUI上に表示する処理を書く
...
// GraphQLのクエリを叩いてデータを取得する
export async function getServerSideProps() {
  const { data } = await client.query({
    query: gql`
      query FeedQuery {
        feed {
          id
          title
          content
          published
          author {
            id
            name
          }
        }
      }
    `,
  });

  return {
    props: {
      data,
    },
  };
}

import { text_to_token } from "../../markdown-parser/pkg";

<div
            dangerouslySetInnerHTML={{
              __html: markdownContent,
            }}
          />

import React, { use, useEffect, useState } from "react";
import Layout from "../../components/layout";
import Router from "next/router";
import gql from "graphql-tag";
import { useMutation } from "@apollo/client";
import { text_to_token } from "../../markdown-parser/pkg";

const CreateDraftMutation = gql`
  mutation CreateDraftMutation(
    $title: String!
    $content: String
    $authorEmail: String!
  ) {
    createDraft(title: $title, content: $content, authorEmail: $authorEmail) {
      id
      title
      content
      published
      author {
        id
        name
      }
    }
  }
`;

function Draft() {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [markdownContent, setMarkdownContent] = useState("");
  const [authorEmail, setAuthorEmail] = useState("");

  const convertContent = (content: string) => {
    console.log(content);
    setContent(content);
    setMarkdownContent(text_to_token(content));
  };

  const [createDraft] = useMutation(CreateDraftMutation);

  return (
    <Layout>
      <div>
        <form
          onSubmit={async (e) => {
            e.preventDefault();

            await createDraft({
              variables: {
                title,
                content,
                authorEmail,
              },
            });
            Router.push("/drafts");
          }}
        >
          <h1>Create Draft</h1>
          <input
            autoFocus
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Title"
            type="text"
            value={title}
          />
          <input
            onChange={(e) => setAuthorEmail(e.target.value)}
            placeholder="Author (email adress)"
            type="text"
            value={authorEmail}
          />
          <textarea
            cols={50}
            onChange={(e) => convertContent(e.target.value)}
            placeholder="Content"
            rows={8}
            value={content}
          />
          <h1>Preview</h1>
          <div
            dangerouslySetInnerHTML={{
              __html: markdownContent,
            }}
          />
          <input
            disabled={!content || !title || !authorEmail}
            type="submit"
            value="Create"
          />
          <a className="back" href="#" onClick={() => Router.push("/")}>
            or Cancel
          </a>
        </form>
      </div>
      <style jsx>{`
        .page {
          background: white;
          padding: 3rem;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        input[type="text"],
        textarea {
          width: 100%;
          padding: 0.5rem;
          margin: 0.5rem 0;
          border-radius: 0.25rem;
          border: 0.125rem solid rgba(0, 0, 0, 0.2);
        }

        input[type="submit"] {
          background: #ececec;
          border: 0;
          padding: 1rem 2rem;
        }

        .back {
          margin-left: 1rem;
        }
      `}</style>
    </Layout>
  );
}

export default Draft;

npm install -g @aws-amplify/cli
amplify configure

amplify init # プロジェクトの初期化 
amplify add hosting # hostingの有効化
amplify publish # アプリケーションのビルド

amplify add api