npm install -g heroku

heroku login

heroku create

Creating app... !
 ▸    To create an app, verify your account by adding payment information.
 ▸    Verify now at https://heroku.com/verify Learn more at
 ▸    https://devcenter.heroku.com/articles/account-verification

アプリを作成しています... !
  ▸ アプリを作成するには、支払い情報を追加してアカウントを確認します。
  ▸ https://heroku.com/verify で今すぐ確認 詳細はこちら
  ▸ https://devcenter.heroku.com/articles/account-verification

pnpm i -D rimraf

    "build": "rimraf ./build && tsc",
    "start": "npm run build && node ./build/index.js",

web: npm start

remote:        > rimraf ./build && tsc
remote:        
remote:        error TS6059: File '/tmp/build_8524c435/vite-project/src/App.tsx' is not under 'rootDir' '/tmp/build_8524c435/src'. 'rootDir' is expected to contain all source files.
remote:          The file is in the program because:
remote:            Matched by default include pattern '**/*'
remote:        error TS6059: File '/tmp/build_8524c435/vite-project/src/main.tsx' is not under 'rootDir' '/tmp/build_8524c435/src'. 'rootDir' is expected to contain all source files.
remote:          The file is in the program because:
remote:            Matched by default include pattern '**/*'
remote:        error TS6059: File '/tmp/build_8524c435/vite-project/vite.config.ts' is not under 'rootDir' '/tmp/build_8524c435/src'. 'rootDir' is expected to contain all source files.
remote:          The file is in the program because:
remote:            Matched by default include pattern '**/*'

2023-04-27T02:54:14.795435+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=afternoon-shore-82089.herokuapp.com request_id=ab4d9fad-c8f1-4b22-99f1-93fb41b37ad5 fwd="218.220.224.82" dyno= connect= service= status=503 bytes= protocol=https

原因②：package.jsonにdevDependenciesの記載がある
devDependenciesはデバッグ時に追加で読み込むライブラリの定義ですが、これがあるとherokuではまともに動作しないようです。

import { ApolloClient, InMemoryCache, gql } from '@apollo/client'

function App() {
  const client = new ApolloClient({
    uri: 'https://○○/api',
    cache: new InMemoryCache(),
  })

  const clickHandler = () => {
    client
      .query({
        query: gql`
          query Query {
            hello
          }
        `,
      })
      .then((result) => console.log(result))
  }

  return (
    <div>
      <p>ボタンclickするとGraphQLサーバと通信するよ</p>
      <button onClick={clickHandler}>click</button>
    </div>
  )
}

export default App

query Query {
  hello
}

query Query {
  books {
    id
    title
  }
}

  books: (_: any, { filter }: argFilterType) => {
    let filteredBooks = books

    if (filter?.isRead) {
      filteredBooks = filteredBooks.filter((book) => {
        return book.isRead
      })
    }

    return filteredBooks
  },

import { PrismaClient, Prisma } from '@prisma/client'

const prisma = new PrismaClient()
  const apolloServer = new ApolloServer({
    typeDefs,
    resolvers: {
      Query,
      Mutation,
      Category,
      Book,
    },
    // context: {
    //   books,
    //   categories,
    // },
    context: {
      prisma,
    },
  })

export type Context = {
  prisma: PrismaClient<Prisma.PrismaClientOptions, never, Prisma.RejectOnNotFound | Prisma.RejectPerOperation>
}

  books: (_: any, { isRead }: { isRead: boolean }, { prisma }: Context) => {
    return prisma.book.findMany({
      where: {
        isRead,
      },
    })
  },

query Book {
  books(isRead:true) {
    id
    title
    isRead
  }
}

query Book($bookId: Int!) {
  book(id: $bookId) {
    id
    title
    isRead
  }
}

{
  "bookId": 1
}

// Category側のidとBook側のcategoryIdの紐づけ
export const Category = {
  books: ({ id }: { id: number }, _: any, { prisma }: Context) => {
    return prisma.book.findMany({
      where: {
        categoryId: id,
      },
    })
  },
}

 deleteBook: async (_: any, { id }: { id: number }, { prisma }: Context): Promise<BookPayload> => {
    const book = await prisma.book.findUnique({
      where: {
        id,
      },
    })

    if (!book) {
      return {
        errors: [{ message: '本が見つかりませんでした' }],
        book: null,
      }
    }

    await prisma.book.delete({
      where: {
        id,
      },
    })

    return {
      errors: [],
      book,
    }
  },
}

  updateBook: async (
    _: any,
    { id, input }: { id: number; input: MutationBook['input'] },
    { prisma }: Context
  ): Promise<BookPayload> => {
    const book = await prisma.book.findUnique({
      where: {
        id,
      },
    })

    if (!book) {
      return {
        errors: [{ message: '本が見つかりませんでした' }],
        book: null,
      }
    }

    const updatedBook = await prisma.book.update({
      where: {
        id,
      },
      data: {
        ...input,
      },
    })

    return {
      errors: [],
      book: updatedBook,
    }
  },

import { gql, useQuery } from '@apollo/client'

const Component = () => {
  const booksData = gql`
    query allBooks {
      books(isRead: true) {
        id
        title
        author
      }
    }
  `

  const { data } = useQuery(booksData)

}