現在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});
あなたの回答
tips
プレビュー