Vue.js 3的快速GraphQL客户端 - villus

Vue.js 3的快速GraphQL客户端 - villus
插件名称 villus
发布时间 2021年5月27日
插件作者 logaretm

适用于Vue.js的小型快速GraphQL客户端

GraphQL只是一个简单的HTTP请求。该库的目标是成为一个小型客户端,而不会给Apollo及其生态系统带来任何麻烦,这意味着它由于捆束尺寸较小和开销减少而使整体运行速度更快。villus提供了简单的策略来缓存和批处理,重复处理GraphQL请求。

villus 还支持文件上传和订阅,而不会影响通过插件的捆绑包大小。

快速开始

首次安装villus

yarn add villus graphql

# or npm

npm install villus graphql --save

或者因为绒毛很简单,所以可以通过CDN使用它:

<!-- Import Vue 3 -->
<script src="https://unpkg.com/vue@3.0.2/dist/vue.global.js"></script>
<!-- Villus -->
<script src="https://unpkg.com/villus@latest/dist/villus.min.js"></script>

现在,您可以将其与新的Vue合成API或更高阶的组件一起使用。

用法

为您的根组件配置GraphQL客户端:

import { useClient } from 'villus';

export default {
  name: 'App',
  setup() {
    useClient({
      url: 'http://localhost:3002/graphql',
    });
  },
};

然后,您可以useQuery在任何子组件中使用:

<template>
  <div>
    <div v-if="data">
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>

<script>
import { useQuery } from 'villus';

export default {
  setup() {
    const AllPosts = `
      query AllPosts {
        posts {
          title
        }
      }
    `;

    const { data } = useQuery({
      query: AllPosts,
    });

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