“名稱”：'“graphgl服務(wù)器”，“版本”：“1.0.0”，“描述”： ””，“作者”： ””，> 調(diào)試“腳本”：{“開發(fā)”：“nodemon app.js”，"test": "echo \"Error: no test specified\" && exit 1"},“主要”：“index.js”，“依賴”：{
    “cors”：“~2.8.5”，
    “表達(dá)”：“?4.18.2”，
    "express—-graphql": "70.12.00",
   “nodemon”：“2.0.20”},“關(guān)鍵字”：[]，“許可證”：“ISC”}

const express = require("快遞");const cors = require("cors");常數(shù) {
    圖形化HTTP} = require("express-graphql");常數(shù) {
    圖形QL對象類型，
    GraphQLInt，
    GraphQL字符串，
    GraphQLList,
    GraphQLSchema，
    GraphQLNonNull，} = require("graphql");const app = express();app.use(cors());讓 userData = [{
        編號：1，
        名字：“約翰”，
        姓氏：“母鹿”，
        年齡：22
    },
    {
        編號：2，
        firstName: "馬克",
        姓氏：“史密斯”，
        年齡：30
    },
    {
        編號：3，
        名字：“羅伯特”，
        lastName: "亨特",
        年齡：35
    },];const userType = new GraphQLObjectType({
    名稱：“用戶”，
    描述：“用戶詳細(xì)信息”，
    字段：{
        ID： {
            類型：GraphQLNonNull（GraphQLInt），
        },
        名： {
            類型：GraphQLNonNull（GraphQLString），
        },
        姓： {
            類型：GraphQLNonNull（GraphQLString），
        },
        年齡： {
            類型：GraphQLNonNull（GraphQLInt），
        },
    },});const rootQuery = new GraphQLObjectType({
    名稱：“根查詢”，
    描述：“這是根查詢”，
    字段：{
        用戶：{
            類型：GraphQLList（用戶類型），
            解析：() => 用戶數(shù)據(jù)，
        },
        用戶：{
            類型：用戶類型，
            參數(shù)：{
                ID： {
                    類型：GraphQLInt
                },
            },
            解析：(_, args) => userData.find((data) => data.id === args.id),
        },
    },});const rootMutation = new GraphQLObjectType({
    名稱：“根突變”，
    描述：“這是根突變”，
    字段：{
        添加用戶： {
            類型：用戶類型，
            參數(shù)：{
                名： {
                    類型：GraphQLNonNull(GraphQLString)
                },
                姓： {
                    類型：GraphQLNonNull(GraphQLString)
                },
                年齡： {
                    類型：GraphQLNonNull(GraphQLInt)
                },
            },
            解決：（_，args）=> {
                const 新用戶 = {
                    id: userData.length + 1,
                    名字：args.firstName，
                    姓氏：args.lastName，
                    年齡：args.age，
                };
                userData.push(newUser);
                返回新用戶；
            },
        }
    },});const schema = new GraphQLSchema({
    查詢：根查詢，
    突變：rootMutation});應(yīng)用程序。使用（
    “/圖形”，
    graphqlHTTP({
        模式，
        graphiql：是的，
    }));常量端口 = 3001；app.listen(PORT, () => {
    console.log(`監(jiān)聽端口 - ${PORT}`);});

npm install --save @vue/apollo-選項(xiàng)npm 安裝 --save @apollo/clientnpm 安裝 --save graphqlnpm 安裝 --save graphql-tag

npm 安裝反應(yīng)

從“@apollo/client”導(dǎo)入{InMemoryCache，ApolloClient}；從“@vue/apollo-option”導(dǎo)入{createApolloProvider}；常量緩存 = 新的 InMemoryCache();const apolloClient = new ApolloClient({
  緩存，
  uri: "http://localhost:3001/graphql",});export const provider = createApolloProvider({默認(rèn)客戶端：apolloClient，});

從“graphgl-tag”導(dǎo)入 agql；導(dǎo)出常量 getAllUsersQuery = gql
 查詢用戶{
  用戶{
   ID
   名
   姓
   年齡
  }
 };導(dǎo)出常量 getSingleUserQuery = gql°
  查詢用戶（$id：Int?。﹞
   用戶（id：$id）{
    ID
    名
    姓
    年齡
   }
  }
 ;export const addUserMutation = gql
   mutation addUser($firstName: String!, $lastName: String!, $age: Int!) {
    添加用戶（名字：$firstName，姓氏：$lastName，年齡：$age）{
    ID
    名
    姓
    年齡
   }
  }
 ;

<模板>
  <分區(qū)>
    <div v-if="用戶">
     <div v-for="用戶中的用戶">
      {{ user.firstName }}
   </div>
  </div>
   <div v-else>沒有找到用戶</div>
  </div></模板>

<模板>
  <分區(qū)>
   <分區(qū)>
    <h5>{{ user.firstName + " " + user.lastName }}</h5>
     <p>年齡——{{ user.age }}</p>
    </div>
  </div></模板>

<模板><分區(qū)><form class="w-1/2 ml-auto mr-auto" @submit.prevent="addUser"><分區(qū)><div class="相對 z-0 w-full mb-6 組"><input type="text" v-model="fname" name="floating_company" id="floating_company" 占位符</div></div><分區(qū)><div class="相對 z-@w-full mb-6 組"<input type="text" v-model="lname" name="floating_company" id="floating_company" placeholder="LastName" required /></div></div><分區(qū)><div class="相對 z-0 w-full mb-6 組"><input type="text" v-model.number="age" name="floating_company" id="floating_company" placeholder="Age" required /></div></div><button type="submit">提交</button></表格></div></模板>