# vue-apollo composition api
作者說有在實作中,但還沒有release
這我大概寫的useQuery範例
還需要重構整理,讓他更乾淨,效能更好一點
import { ref, watch, reactive, isRef } from "@vue/composition-api";
export function useQuery({ query, context, variables, skip }) {
const resultData = ref({});
const error = ref(null);
const loading = ref(true);
const varsRef = ref(variables);
const skipRef = ref(isRef(skip) ? skip.value : skip);
const q = (v) =>
context.root.$apollo.query({
query,
fetchPolicy: "cache-and-network",
variables: v
});
watch(
[varsRef, skipRef],
async ([v, skip], [ov, oldSkip], clean) => {
console.log('vars: ', v);
console.log('skip: ', skip);
if (skip) {
resultData.value = {};
error.value = null;
loading.value = false;
return;
}
try {
const { data, errors, loading: isLoading, networkStatus } = await q(v);
console.log('networkStatus: ', networkStatus)
console.log('data: ', data)
loading.value = isLoading;
resultData.value = data;
if (errors) {
error.value = errors;
}
} catch (error) {
error.value = error;
console.error(error);
}
},
{ lazy: true, deep: true }
);
return {
data: resultData,
error,
loading,
query: q,
options: reactive({
variables: varsRef,
skip: skipRef,
})
};
}