Queries语法

query （自取名称）{
	（路由）{
		返回字段
	}
}

Queries查询

// src/graphql/api/user.ts
import gql from 'graphql-tag';
// $id为传参
// 类型为graphql类型
export const GET_USER = gql`
  query GetUser($id: String!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

页面使用

// src/pages/index.vue
<template>
  <div class="input-group mb-3">
    <input
      type="text"
      class="form-control"
      placeholder="输入ID查询"
      v-model="uid"
    />
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button" @click="onSearch">
        查询
      </button>
    </div>
  </div>
  <div class="input-group mb-3">
    <div class="card" style="width: 18rem">
      <div class="card-header bg-transparent border-success">
        {{ userInfo?.user?.name }}
      </div>
      <div class="card-body">
        <p class="card-text">email:{{ userInfo?.user?.email }}</p>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, unref, computed } from 'vue';
import { useQuery } from '@vue/apollo-composable';
const uid = ref('');
const uidValue = ref('1');

const enabled = ref(false); // 自动查询
import { GET_USER } from '@/graphql/api/userTs';
const { result, refetch } = useQuery(
  GET_USER,
  () => ({
    id: uidValue.value,
  }),
  () => ({
    enabled: enabled.value,
  }),
);

const userInfo = computed(() => unref(result));
const onSearch = () => {
  enabled.value = true;
  uidValue.value = uid.value;
  refetch({ id: uid.value });
};
</script>

useQuery传参与返回值，[跳转](https://apollo.vuejs.org/zh-cn/api/use-query.html)
enabled用于启用或禁用查询，当是true的情况下，进入页面会自动查询一次

Mutations 语法

mutation（自取名称）{
	（路由）{
		返回字段
	}
}

Mutations 变更

// src/graphql/api/user.ts
export const CREATE_USER = gql`
  mutation createUser($input: CreateUserInput!) {
    createUser(input: $input) {
      id
      name
      email
    }
  }
`;

页面使用

<template>
  <div class="row">
    <div class="col-sm">
      <div class="input-group mb-5">
        <div class="card" style="width: 25rem">
          <div class="card-header bg-transparent border-success">创建用户</div>
          <div class="card-body">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">name</span>
              </div>
              <input
                type="text"
                class="form-control"
                placeholder="Username"
                aria-label="Username"
                aria-describedby="basic-addon1"
                v-model="name"
              />
            </div>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">email</span>
              </div>
              <input
                type="text"
                class="form-control"
                placeholder="Email"
                aria-label="Email"
                aria-describedby="basic-addon1"
                v-model="email"
              />
            </div>
          </div>
          <div class="card-footer">
            <button
              type="button"
              class="btn btn-primary"
              @click="handleCreateUser()"
            >
              确定
            </button>
            <button type="button" class="btn btn-light" @click="handleClear()">
              清空
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm">
      <div class="toast" role="alert" aria-live="polite" v-if="successShow">
        <div class="toast-header">
          <strong class="mr-auto">创建成功</strong>
          <small class="text-muted">刚刚</small>
          <button
            type="button"
            class="ml-2 mb-1 close"
            data-dismiss="toast"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="toast-body">
          创建成功！新用户ID：
          <!-- {{ uid }} -->
          {{ createdUser?.id }}
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useMutation } from '@vue/apollo-composable';
import { CREATE_USER } from '@/graphql/api/userTs';
import { ref, watch, onUnmounted } from 'vue';
const name = ref('');
const email = ref('');
const successShow = ref(false);
const uid = ref('');
let timer: any = null;

const { mutate: createUserWithInput } = useMutation(CREATE_USER);
const handleCreateUser = async () => {
  const result: any = await createUserWithInput({
    input: { name: name.value, email: email.value },
  });
  console.log(result);
  if (result?.data?.createUser) {
    successShow.value = true;
    uid.value = result?.data?.createUser?.id;
  }
};
watch(successShow, (newVal) => {
  if (timer) clearTimeout(timer);
  if (newVal) {
    timer = setTimeout(() => {
      successShow.value = false;
    }, 2000);
  }
});
const handleClear = () => {
  name.value = '';
  email.value = '';
};
onUnmounted(() => {
  if (timer) clearTimeout(timer);
});
</script>