質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

データベース設計

データベース設計はデータベースの論理的や物理的な部分を特定する工程です。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

663閲覧

GraphQLサーバーを建てることについて

busiRyu110

総合スコア2

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

データベース設計

データベース設計はデータベースの論理的や物理的な部分を特定する工程です。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/08/14 14:43

現在FrontとBackをつなげて自分でDBを作成してFrontでそのDBを使いたいと思っています。
まだDBと繋げていないですが、Mysqlと繋げるつもりです。
Prisma2を使用したいです。

今の状態だとBackendの1つのファイル(app.js)で多くのType,Query,Mutationを書くことになります。
もっと効率が良い方法は無いでしょうか?

DataModelyaTypeはPrisma2で使用して生成し、Mysqlに接続する。
その後どのようなライブラリー??を使用して、GraphQLサーバーを建てて、Backendの下記のコードにある変数のlanguageType、rootQuery 、rootMutation を変更していけばよいでしょうか??

現在使用している技術は

Backend: Node.js with express.js

Frontend: React.js

Frontend

Frontendは@apollo/clientを使用して、dataを引っ張ってきています。
index.jsからは下記のようにimportしています。これは問題なく機能します。

import { ApolloClient, InMemoryCache, gql, ApolloProvider, } from "@apollo/client";

Backend

Backendは下記のようにexpress-graphqlを使用して、このapp.jsの中で型とqueryとmutationを使用して、Frontでも使用できるようにしています。

app.js

1const express = require("express"); 2const app = express(); 3const cors = require('cors') 4const { graphqlHTTP } = require("express-graphql"); 5const { 6 GraphQLObjectType, 7 GraphQLString, 8 GraphQLBoolean, 9 GraphQLInt, 10 GraphQLList, 11 GraphQLSchema, 12} = require("graphql"); 13 14app.use(cors()) 15 16const seedData = [ 17 { id: 1, language: "React", loved: true }, 18 { id: 2, language: "CSS", loved: true }, 19 { id: 3, language: "JavaScript", loved: true }, 20]; 21//Schema 22//resolver 23 24const languageType = new GraphQLObjectType({ 25 name: "Language", 26 description: "ProgrmmingLanguage", 27 fields: { 28 id: { 29 type: GraphQLInt, 30 }, 31 language: { 32 type: GraphQLString, 33 }, 34 loved: { 35 type: GraphQLBoolean, 36 }, 37 }, 38}); 39 40const rootQuery = new GraphQLObjectType({ 41 name: "RootQuery", 42 description: "This is the rootQuery", 43 fields: { 44 languages: { 45 type: GraphQLList(languageType), 46 resolve: () => seedData, 47 }, 48 language: { 49 type: languageType, 50 args: { 51 id: { type: GraphQLInt }, 52 }, 53 resolve: (_, { id }) => seedData.find((language) => language.id == id), 54 }, 55 }, 56}); 57 58const rootMutation = new GraphQLObjectType({ 59 name: "RootMutation", 60 description: "This is the rootMutation", 61 fields: { 62 language: { 63 type: languageType, 64 args: { 65 lang: { type: GraphQLString }, 66 loved: { type: GraphQLBoolean }, 67 }, 68 resolve: (_, { lang, loved }) => { 69 const newLanguage = { 70 id: seedData.length + 1, 71 language: lang, 72 loved: loved, 73 }; 74 seedData.push(newLanguage); 75 return newLanguage; 76 }, 77 }, 78 }, 79}); 80 81const schema = new GraphQLSchema({ query: rootQuery, mutation: rootMutation }); 82app.use( 83 "/graphql", 84 graphqlHTTP({ 85 schema, 86 graphiql: true, 87 }) 88); 89 90require("dotenv").config(); 91app.set("view enjine", "ejs"); 92// app.use("/api/", require("./routes/hello")); 93 94const PORT = process.env.PORT || 3001; 95 96app.listen(PORT, () => { 97 console.log(`backend接続完了: ${PORT}`); 98});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問