Vue3 Composition API结合Pinia与Urql的使用问题

问题根源 #

Urql提供的useQuery/useMutation这类composable依赖Vue的响应式上下文（需在组件setup或其他Vue上下文环境中调用），而Pinia选项式store的action本身不属于响应式上下文，直接调用会因无法获取Urql Client实例而失败。另外，在state区域调用composable违背了state仅存储数据的职责，确实不合理。

可行方案 #

方案一：直接使用Urql Client实例发起请求

Urql的composable本质是对Client实例的封装，因此可以直接在Pinia中使用Client实例执行GraphQL请求，无需依赖composable。

步骤：

1. 在项目入口（如main.js/main.ts）创建并导出Urql Client实例：

import { createClient } from '@urql/vue';

export const urqlClient = createClient({
  url: '你的GraphQL接口地址',
  // 可添加headers等其他配置
});

const app = createApp(App);
app.use(urqlClient);

2. 在Pinia store中导入Client实例，在action中发起请求并更新状态：

import { defineStore } from 'pinia';
import { urqlClient } from '../main';

export const useUsersStore = defineStore('app', {
  state: () => ({
    users: []
  }),
  actions: {
    async fetchUsers() {
      const { data, error } = await urqlClient.query(`
        query GetUsers {
          users { id name }
        }
      `).toPromise();
      
      if (error) {
        console.error(error);
        return;
      }
      
      this.users = data.users;
    }
  }
});

若使用Pinia组合式写法，可直接在setup函数中通过useClient()获取实例：

import { defineStore } from 'pinia';
import { useClient } from '@urql/vue';
import { ref } from 'vue';

export const useUsersStore = defineStore('app', () => {
  const client = useClient();
  const users = ref([]);

  const fetchUsers = async () => {
    const { data, error } = await client.query(`
      query GetUsers {
        users { id name }
      }
    `).toPromise();
    
    if (!error) {
      users.value = data.users;
    }
  };

  return { users, fetchUsers };
});

方案二：组件中使用Urql Composable，调用Pinia Action更新状态

这种方式贴合Vue响应式设计：组件负责发起请求（利用Urql的缓存、自动重请求等特性），再将数据传递给Pinia的action更新全局状态。

1. 组件中使用Urql的composable获取数据：

import { useUsersStore } from '@/stores/users';
import { useQuery } from '@urql/vue';
import { watch } from 'vue';

export default {
  setup() {
    const usersStore = useUsersStore();
    const { data } = useQuery({
      query: `
        query GetUsers {
          users { id name }
        }
      `
    });

    // 监听数据变化，调用store action更新状态
    watch(data, (newData) => {
      if (newData) {
        usersStore.setUsers(newData.users);
      }
    });

    return {};
  }
};

2. Pinia store中定义更新状态的action：

import { defineStore } from 'pinia';

export const useUsersStore = defineStore('app', {
  state: () => ({
    users: []
  }),
  actions: {
    setUsers(newUsers) {
      this.users = newUsers;
    }
  }
});

方案选择建议 #

• 如果需要集中处理请求逻辑（比如多个组件复用同一请求、请求需结合其他状态操作），优先选择方案一，直接使用Urql Client实例。
• 如果请求是组件特定场景，且需要利用Urql的响应式特性（缓存、自动重请求、加载状态管理），选择方案二更合适。

内容的提问来源于stack exchange，提问作者Shay Yzhakov