refactor: 使用villus自身的特性

Justin3go · Apr 20, 2023 · c1b9efc · c1b9efc
1 parent 8e22d7c
commit c1b9efc
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 64 deletions.
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
@@ -44,7 +44,7 @@ import leftBubble from "./leftBubble.vue";
 import rightBubble from "./rightBubble.vue";
 import type { messagesI } from "./chat.interface";
 import { chatGQL } from "@/graphql/me.graphql";
-import { useQuery } from "villus";
+import { useMutation } from "villus";
 import { logoUrl } from "@/const";
 import { useMeStore } from "@/stores/me.store";
 
@@ -60,12 +60,11 @@ async function submit() {
 		text: input.value,
 		time: new Date().getTime(),
 	});
-	const { execute } = useQuery({ query: chatGQL, variables: { talk: input.value } });
-	uni.showLoading({ title: "正在加载中" });
-	const { error, data } = await execute();
+	const { execute } = useMutation(chatGQL);
+	const { error, data } = await execute({ talk: input.value })
 	if (error) {
 		uni.showToast({
-			title: `加载错误: ${error}`,
+			title: `加载错误`,
 			icon: "error",
 			duration: 3000,
 		});

diff --git a/src/graphql/me.graphql.ts b/src/graphql/me.graphql.ts
@@ -53,7 +53,7 @@ export const updateUserGQL = gql`
 `;
 
 export const getPostObjectParamsGQL = gql`
-	query getPostObjectParams {
+	mutation getPostObjectParams {
 		getPostObjectParams {
 			OSSAccessKeyId
 			policy
@@ -95,7 +95,7 @@ export const listAsFriendGQL = gql`
 `;
 
 export const chatGQL = gql`
-	query chat($talk: String!) {
+	mutation chat($talk: String!) {
 		customerChat(talk: $talk) {
 			knowledge
 			text

diff --git a/src/graphql/setup.ts b/src/graphql/setup.ts
@@ -13,7 +13,7 @@ const fetchPlugin = fetch({
 				header: options?.headers,
 
 				success(res) {
-					return resolve({
+					resolve({
 						ok: true,
 						status: res.statusCode,
 						headers: res.header,
@@ -22,7 +22,7 @@ const fetchPlugin = fetch({
 					} as Response);
 				},
 				fail(e) {
-					return reject(e);
+					reject(e);
 				},
 			});
 		});

diff --git a/src/pages/me/rankList.vue b/src/pages/me/rankList.vue
@@ -39,10 +39,9 @@
 	</view>
 </template>
 <script setup lang="ts">
-import { onLoad, onShow } from "@dcloudio/uni-app";
+import { onLoad } from "@dcloudio/uni-app";
 import { ref, watch, type Ref } from "vue";
 import type { RangeI } from "../show/show.interface";
-import type { QuestionnaireI } from "../questionnaire/questionnaire.interface";
 import { useQuery } from "villus";
 import { meGQL } from "@/graphql/questionnaire.graphql";
 import type { rankDataI } from "./me.interface";
@@ -52,42 +51,36 @@ import empty from "@/components/empty.vue";
 
 const meOrOther: Ref<"me" | "other"> = ref("me");
 
-const questionnaires: Ref<QuestionnaireI[]> = ref([]);
+const { data: questionnaires, error: questionnairesError } = useQuery({ query: meGQL });
+// const questionnaires: Ref<QuestionnaireI[]> = ref([]);
 const range: Ref<RangeI[]> = ref([]);
 
 watch(questionnaires, (newVal) => {
-	range.value = newVal.map((item) => ({
-		value: item.id,
-		text: item.title,
+	range.value = newVal?.me.questionnairesAsOwnerAsFriend.map((item: any) => ({
+		value: item.questionnaire.id,
+		text: item.questionnaire.title,
 	}));
 });
 
+watch(questionnairesError, (newVal) => {
+	uni.showToast({
+		title: "获取问卷失败",
+		icon: "error",
+		duration: 2000,
+	});
+	throw new Error(`获取问卷失败: ${newVal}`);
+});
+
 const curValue = ref("");
 const curQuestionnaireId = ref("");
 
 onLoad((option) => {
 	meOrOther.value = option?.option;
 });
 
-onShow(async () => {
-	const { execute } = useQuery({ query: meGQL });
-	const { error, data } = await execute();
-	if (error) {
-		uni.showToast({
-			title: `获取已填写问卷失败: ${error}`,
-			icon: "error",
-			duration: 2000,
-		});
-		throw new Error(`获取已填写问卷失败: ${error}`);
-	}
-	questionnaires.value = data?.me.questionnairesAsOwnerAsFriend.map((item: any) => item.questionnaire) || [];
-});
-
 const rankData: Ref<rankDataI> = ref({});
 
 async function chooseQuestionnaire(e: any) {
-	console.log("chooseQuestionnaire: ", e);
-
 	curQuestionnaireId.value = e;
 	if (meOrOther.value === "me") {
 		await getListAsOwner(e);
@@ -97,7 +90,7 @@ async function chooseQuestionnaire(e: any) {
 }
 
 async function getListAsOwner(questionnaireId: string) {
-	const { execute } = useQuery({ query: listAsOwnerGQL, variables: { questionnaireId } });
+	const { execute } = useQuery({ query: listAsOwnerGQL, variables: { questionnaireId }, paused: () => true });
 	const { error, data } = await execute();
 	if (error) {
 		uni.showToast({
@@ -122,7 +115,7 @@ async function getListAsOwner(questionnaireId: string) {
 }
 
 async function getListAsFriend(questionnaireId: string) {
-	const { execute } = useQuery({ query: listAsFriendGQL, variables: { questionnaireId } });
+	const { execute } = useQuery({ query: listAsFriendGQL, variables: { questionnaireId }, paused: () => true });
 	const { error, data } = await execute();
 	if (error) {
 		uni.showToast({

diff --git a/src/pages/me/updateUser.vue b/src/pages/me/updateUser.vue
@@ -172,8 +172,7 @@ async function save() {
 // 上传头像，规定头像的文件大小不能超过1mb
 async function uploadAvatar(filePath: string) {
 	// 1. 请求服务端签名凭证
-	const { execute } = useQuery({ query: getPostObjectParamsGQL });
-	uni.showLoading({ title: "正在请求上传凭证中..." });
+	const { execute } = useMutation(getPostObjectParamsGQL);
 	const { error, data } = await execute();
 	if (error) {
 		uni.showToast({

diff --git a/src/pages/questionnaire/look.vue b/src/pages/questionnaire/look.vue
@@ -67,7 +67,7 @@ onLoad(async (option) => {
 });
 
 async function getQuestions(questionnaireId: string) {
-	const { execute } = useQuery({ query: findOneQGQL, variables: { questionnaireId } });
+	const { execute } = useQuery({ query: findOneQGQL, variables: { questionnaireId }, paused: () => true });
 	uni.showLoading({ title: "正在加载问题列表" });
 	const { error, data } = await execute();
 
@@ -89,7 +89,7 @@ async function getQuestions(questionnaireId: string) {
 }
 
 async function getResults() {
-	const { execute } = useQuery({ query: findOneU2QGQL, variables: { data: { ...params } } });
+	const { execute } = useQuery({ query: findOneU2QGQL, variables: { data: { ...params } }, paused: () => true });
 	uni.showLoading({ title: "正在加载结果列表" });
 	const { error, data } = await execute();
 	console.log("get result error: ", error);

diff --git a/src/pages/questionnaire/write.vue b/src/pages/questionnaire/write.vue
@@ -70,7 +70,6 @@ onLoad(async (option) => {
 	params.friendId = option?.friendId || meStore.user?.id;
 	// TODO 检测该链接是否已经填写过
 	if (await isExisted()) {
-		console.log("已经填写过该问卷了");
 		// 帮助好友填写都是从登录页过来的，所以这里直接返回登录页面
 		uni.navigateBack({
 			delta: 1,
@@ -87,7 +86,8 @@ onLoad(async (option) => {
 });
 
 async function getQuestions(questionnaireId: string) {
-	const { execute } = useQuery({ query: findOneQGQL, variables: { questionnaireId } });
+	// 需要在获取到questionnaireId再执行请求
+	const { execute } = useQuery({ query: findOneQGQL, variables: { questionnaireId }, paused: () => true });
 	uni.showLoading({ title: "正在加载问题列表" });
 	const { error, data } = await execute();
 
@@ -109,20 +109,17 @@ async function getQuestions(questionnaireId: string) {
 }
 
 async function isExisted() {
-	const { execute } = useQuery({ query: isExistedGQL, variables: { data: { ...params } } });
-	uni.showLoading({ title: "正在校验中" });
+	// 只有初始加载的时候需要判断是否存在
+	const { execute } = useQuery({ query: isExistedGQL, variables: { data: { ...params } }, paused: () => true });
 	const { error, data } = await execute();
-
 	if (error) {
 		uni.showToast({
-			title: `校验请求失败: ${error}`,
+			title: `校验请求失败`,
 			icon: "error",
 			duration: 2000,
 		});
 		throw new Error(`校验请求失败: ${error}`);
 	}
-	console.log("isExisted error: ", error);
-	console.log("isExisted data: ", data);
 
 	const isExisted: boolean = data?.isExisted;
 	return isExisted;

diff --git a/src/pages/show/components/radar.vue b/src/pages/show/components/radar.vue
@@ -57,7 +57,7 @@ import { useMeStore } from "@/stores/me.store";
 import { onBeforeMount } from "vue";
 import empty from "@/components/empty.vue";
 import { userDefaultData } from "@/const";
-import { omitLongString } from "@/utils/string"
+import { omitLongString } from "@/utils/string";
 
 interface propsI {
 	questionnaireId: string;
@@ -74,7 +74,6 @@ const chartData = reactive({
 			name: "自己",
 			data: [0, 0, 0, 0, 0],
 		},
-		// TODO 截断名字
 		{
 			name: "未选择",
 			data: [0, 0, 0, 0, 0],
@@ -132,12 +131,17 @@ onBeforeMount(async () => {
 	await getFriendListAsOwner();
 });
 
+const { execute } = useQuery({
+	query: listAsOwnerGQL,
+	variables: { questionnaireId: props.questionnaireId },
+	paused: () => true, // 初始不需要数据，需要等用户选择之后再执行
+});
+
 async function getFriendListAsOwner() {
-	const { execute } = useQuery({ query: listAsOwnerGQL, variables: { questionnaireId: props.questionnaireId } });
 	const { error, data } = await execute();
 	if (error) {
 		uni.showToast({
-			title: `获取朋友列表失败: ${error}`,
+			title: `获取朋友列表失败`,
 			icon: "error",
 			duration: 2000,
 		});
@@ -150,11 +154,11 @@ async function getFriendListAsOwner() {
 function submit() {
 	const friend1 = friendList.value.find((item) => item.id === curSelect.value[0]);
 	chartData.series[1].data = friend1?.visualization || [0, 0, 0, 0, 0];
-	const nickName1 = omitLongString(friend1?.nickName || "", 8) 
+	const nickName1 = omitLongString(friend1?.nickName || "", 8);
 	chartData.series[1].name = nickName1 || "未选择";
 	const friend2 = friendList.value.find((item) => item.id === curSelect.value[1]);
 	chartData.series[2].data = friend2?.visualization || [0, 0, 0, 0, 0];
-	const nickName2 = omitLongString(friend2?.nickName || "", 8)
+	const nickName2 = omitLongString(friend2?.nickName || "", 8);
 	chartData.series[2].name = nickName2 || "未选择";
 	console.log("chartData.series: ", chartData.series);
 }

diff --git a/src/pages/show/index.vue b/src/pages/show/index.vue
@@ -16,7 +16,6 @@
 <script setup lang="ts">
 import { ref, watch, type Ref } from "vue";
 import radar from "./components/radar.vue";
-import { onShow } from "@dcloudio/uni-app";
 import { useQuery } from "villus";
 import { meGQL } from "@/graphql/questionnaire.graphql";
 import type { QuestionnaireI } from "../questionnaire/questionnaire.interface";
@@ -42,26 +41,23 @@ const range: Ref<RangeI[]> = ref([]);
 const curValue = ref("");
 const showType = ref(-1);
 
-watch(questionnaires, (newVal) => {
-	range.value = newVal.map((item) => ({
+const { data, error  } = useQuery({ query: meGQL })
+watch(data, (newVal) => {
+	questionnaires.value = newVal?.me.questionnairesAsOwnerAsFriend.map((item: any) => item.questionnaire) || [];
+	range.value = questionnaires.value.map((item) => ({
 		value: item.id,
 		text: item.title,
 	}));
 });
 
-onShow(async () => {
-	const { execute } = useQuery({ query: meGQL });
-	const { error, data } = await execute();
-	if (error) {
-		uni.showToast({
-			title: `获取已填写问卷失败: ${error}`,
+watch(error, (newVal) => {
+	uni.showToast({
+			title: `获取已填写问卷失败`,
 			icon: "error",
 			duration: 2000,
 		});
-		throw new Error(`获取已填写问卷失败: ${error}`);
-	}
-	questionnaires.value = data?.me.questionnairesAsOwnerAsFriend.map((item: any) => item.questionnaire) || [];
-});
+		throw new Error(`获取已填写问卷失败: ${newVal}`);
+})
 
 function chooseQuestionnaire(e: any) {
 	showType.value = questionnaires.value.find((item) => item.id == e)?.type ?? -1;