URQL 的基本介紹與常見應用

// main.ts

import { createApp } from "vue";
import App from "./App.vue";
import { router } from "./router";
import urql from "@urql/vue";
import urqlSetting from "@/graphql";

const app = createApp(App);
app.use(urql, urqlSetting);
app.use(router);
app.mount("#app");

const { data, fetching, error, isPaused, pause, resume } = useQuery({ query: `...`, varaiables: { ... }, pause: boolean})

<script>
import { useQuery, gql } from '@urql/vue';

export default {
    setup(props) {
      const from = ref(0);
      const limit = ref(10);

      // pause, resume, executeQuery 都是 function
      const { data, fetching, error, isPaused, pause, resume, executeQuery } = useQuery({
        query: gql`
          query GetTodos($from: Int!, $limit: Int!, $isFinished: Boolean!){
            todos (from: $from, limit: $limit, isFinished: $isFinished) {
              id
              title
            }
          }
        `,
        variables: {
          from,
          limit,
          isFinished: props.isFinished
        },
        // pause 值是 true 的話停止執行該 query
        pause: computed(() => !from.value || !limit.value)
      });


      // 直接這樣取值的時候，因為 call API 後，response 還沒回來，所以會是 undefined
      // 所以 return 出去到 template 的時候都要篩選
      console.log(data.value.todos.title);

      watch(data, (newVal) => {
        // 這邊就可以拿到值
        console.log(newVal.todos.title);
      })

      // 手動立即執行 query
      const refresh = () => {
        executeQuery({
          requestPolicy: 'network-only',
        });
      };

      return {
        fetching,
        data,
        error,
        refresh,
        isPaused,
        pause,
        resume,
      }
    }
</script>

const { executeMutation: rename, data, error } = useMutation(`...`);

rename({ input }).then(...)

// 變數
const newTodoInput = reactive({
  todo: "sleep",
});

// useMutation 只有單一參數 string
// 這邊跟 query 一樣，都可以拿到 request 完之後的 data、fetching 以及 error
// executeMutation 基本上都會改名
const {
  executeMutation: addTodo,
  data,
  fetching,
} = useMutation(gql`
  mutation addNewTodo($newTodoInput: NewTodoInput!) {
    addTodo(input: $newTodoInput) {
      addTodo {
        id
      }
    }
  }
`);

// 變數包在 {} 中當成參數傳給 addField
// data 就是 request 成功後的回傳值，編輯、新增時都可以拿得到
addTodo({ newTodoInput }).then(({ data, error }) => {
  // 取值需要很落落長...
  // 第一個 addTodo 是 Field Name
  // 第二個 addTodo 是 addTodo 成功後回傳的內容
  console.log(data.addTodo.addTodo.id);
  // 這邊的 error 格式跟 useQuery 回傳的 error 格式相同
  console.log(error?.message);
});

// 也可以透過 async / await 取值
const addNewTodo = async () => {
  const { data, error } = await addTodo({ newTodoInput });
};

import { Client, defaultExchanges, subscriptionExchange } from "urql";
import { SubscriptionClient } from "subscriptions-transport-ws";

const WEBSOCKET_URL = "wss://websocket.example/";

const subscriptionClient = new SubscriptionClient(WEBSOCKET_URL, {
  reconnect: true,
});

const client = new Client({
  url: "http://api.example/graphql",
  exchanges: [
    ...defaultExchanges,
    subscriptionExchange({
      forwardSubscription: (operation) => subscriptionClient.request(operation),
    }),
  ],
});

<script>
import { useSubscription } from '@urql/vue';

export default {
  setup() {
    const handleSubscription = (messages = [], response) => {
      return [response.newMessages, ...messages];
    };

    const { data, error } = useSubscription({
      query: `
        subscription MessageSub {
          newMessages {
            id
            from
            text
          }
        }
      `
    }, handleSubscription)

    return {
      data,
      error,
    };
  }
};
</script>