Apollo Vue GraphQL 入门

“名称”：'“graphgl服务器”，“版本”：“1.0.0”，“描述”： ””，“作者”： ””，> 调试“脚本”：{“开发”：“nodemon app.js”，"test": "echo \"Error: no test specified\" && exit 1"},“主要”：“index.js”，“依赖”：{
    “cors”：“~2.8.5”，
    “表达”：“〜4.18.2”，
    "express—-graphql": "70.12.00",
   “nodemon”：“2.0.20”},“关键字”：[]，“许可证”：“ISC”}

const express = require("快递");const cors = require("cors");常数 {
    图形化HTTP} = require("express-graphql");常数 {
    图形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({
    名称：“用户”，
    描述：“用户详细信息”，
    字段：{
        ID： {
            类型：GraphQLNonNull（GraphQLInt），
        },
        名： {
            类型：GraphQLNonNull（GraphQLString），
        },
        姓： {
            类型：GraphQLNonNull（GraphQLString），
        },
        年龄： {
            类型：GraphQLNonNull（GraphQLInt），
        },
    },});const rootQuery = new GraphQLObjectType({
    名称：“根查询”，
    描述：“这是根查询”，
    字段：{
        用户：{
            类型：GraphQLList（用户类型），
            解析：() => 用户数据，
        },
        用户：{
            类型：用户类型，
            参数：{
                ID： {
                    类型：GraphQLInt
                },
            },
            解析：(_, args) => userData.find((data) => data.id === args.id),
        },
    },});const rootMutation = new GraphQLObjectType({
    名称：“根突变”，
    描述：“这是根突变”，
    字段：{
        添加用户： {
            类型：用户类型，
            参数：{
                名： {
                    类型：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});应用程序。使用（
    “/图形”，
    graphqlHTTP({
        模式，
        graphiql：是的，
    }));常量端口 = 3001；app.listen(PORT, () => {
    console.log(`监听端口 - ${PORT}`);});

npm install --save @vue/apollo-选项npm 安装 --save @apollo/clientnpm 安装 --save graphqlnpm 安装 --save graphql-tag

npm 安装反应

从“@apollo/client”导入{InMemoryCache，ApolloClient}；从“@vue/apollo-option”导入{createApolloProvider}；常量缓存 = 新的 InMemoryCache();const apolloClient = new ApolloClient({
  缓存，
  uri: "http://localhost:3001/graphql",});export const provider = createApolloProvider({默认客户端：apolloClient，});

从“graphgl-tag”导入 agql；导出常量 getAllUsersQuery = gql
 查询用户{
  用户{
   ID
   名
   姓
   年龄
  }
 };导出常量 getSingleUserQuery = gql°
  查询用户（$id：Int！）{
   用户（id：$id）{
    ID
    名
    姓
    年龄
   }
  }
 ;export const addUserMutation = gql
   mutation addUser($firstName: String!, $lastName: String!, $age: Int!) {
    添加用户（名字：$firstName，姓氏：$lastName，年龄：$age）{
    ID
    名
    姓
    年龄
   }
  }
 ;

<模板>
  <分区>
    <div v-if="用户">
     <div v-for="用户中的用户">
      {{ user.firstName }}
   </div>
  </div>
   <div v-else>没有找到用户</div>
  </div></模板>

<模板>
  <分区>
   <分区>
    <h5>{{ user.firstName + " " + user.lastName }}</h5>
     <p>年龄——{{ user.age }}</p>
    </div>
  </div></模板>

<模板><分区><form class="w-1/2 ml-auto mr-auto" @submit.prevent="addUser"><分区><div class="相对 z-0 w-full mb-6 组"><input type="text" v-model="fname" name="floating_company" id="floating_company" 占位符</div></div><分区><div class="相对 z-@w-full mb-6 组"<input type="text" v-model="lname" name="floating_company" id="floating_company" placeholder="LastName" required /></div></div><分区><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></模板>