Vue Graphql

Hxb-Vue-graphql

Get Started

Initialize

Create an application Vue:

vue create vue-graphql-hxb

When prompted to pick a preset, you can simply select like this:

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n

Then option choice Yarn

-Install package

Using optional yarn package

  yarn add react graphql apollo-boost vue-class-component vue-property-decorator @apollo/client @vue/apollo-composable 
  yarn add -D eslint babel-eslint eslint-plugin-vue vue-cli-plugin-vue-next @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-typescript @vue/cli-service

File package.json like this:

{
  "name": "vue-graphql",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@apollo/client": "^3.4.17",
    "@vue/apollo-composable": "^4.0.0-alpha.15",
    "apollo-boost": "^0.4.9",
    "core-js": "^3.6.5",
    "graphql": "^16.0.1",
    "react": "^17.0.2",
    "vue": "^3.0.0-beta.1",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^9.1.2"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-typescript": "^4.5.15",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-beta.1",
    "@vue/eslint-config-typescript": "^7.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-alpha.0",
    "typescript": "~4.1.5",
    "vue-cli-plugin-vue-next": "~0.1.4"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript"
    ],
    "parserOptions": {
      "parser": "@typescript-eslint/parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

-Config to using typescript and Connect Vue with grahpql through apollo

Create file .eslintrc.js like this:

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

Create file tsconfig.json like this:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

In main.ts import package @apollo/client:

import { createApp, h, provide } from "vue";
import {
  ApolloClient,
  ApolloLink,
  InMemoryCache,
  from,
  HttpLink,
} from "@apollo/client/core";
import { DefaultApolloClient } from "@vue/apollo-composable";
import App from "./App.vue";

In main.ts add authentication token and connect to uri api and cache fields:

const token = localStorage.getItem('token');
const additiveLink = from([
  new ApolloLink((operation, forward) => {
    operation.setContext(({ headers }: any) => ({
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : null
      }
    }));
    return forward(operation);
  }),
  new HttpLink({ uri: "https://hxb-graph.hexabase.com/graphql" })
]);

const apolloClient = new ApolloClient({
  link: additiveLink,
  cache: new InMemoryCache()
});

In main.ts wrap vue app with provide

const app = createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient)
  },
  render: () => h(App)
});

app.mount("#app");

In shims-vue.d.ts to config ReturnType like this:

declare module '*.vue' {
  import type { defineComponent  } from 'vue'
  const component: ReturnType<typeof defineComponent>;
  export default component
}

creaet file shims-tsx.d.ts like this:

import Vue, { VNode } from 'vue'

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any
    }
  }
}

-Example Query/Mutation Graphql with Hexabase:

-Create UI:

At template In file main.ts create button choice optional is workspaces and check condition show Workspaces component:

  <div class="app">
  <header>
    <div class="title">
      <img alt="hexabase logo" src="./assets/hexabase.png">
    </div>
    <div class="order">
      <button @click="handleClick('workspaces')">Workspaces</button>
      <button @click="handleClick('applicationdatastore')">ApplicationDatastore</button>
    </div>
  </header>

  <Workspaces v-if="choice =='workspaces'" />

Then import Workspace component and handle button:

import { defineComponent, ref } from 'vue';
import Workspaces from './components/Workspace.vue'

export default defineComponent({
  name: 'App',
  components: { Workspaces },
  setup() {
    let choice = ref<string>('')
    const handleClick = (term: string) => {
      choice.value = term
    }
    return { choice, handleClick }
  }
});
</script>

Add style like this:

header {
  text-align: center;
}
header .order {
  margin-top: 20px;
}
button {
  margin: 0 10px;
  color: #1195c9;
  border: 3px solid #1195c9;
  background: #d5f0ff;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}
header .title{
  /* display: flex; */
  justify-content: center;
}
header img {
  width: 100%;
  max-width: 250px;
  margin-right: 20px;
}

-Create graphql:

Create folder graphql and then create file workspaces.ts:

import package and create sentence query and mutation

import { gql } from "@apollo/client/core";

export const GET_WORKSPACES = gql` query {
  workspaces {
    workspaces {
      workspace_name
      workspace_id
    },
    current_workspace_id
  }
}`

export const ADD_WORKSPACE = gql`
mutation createWorkspace($createWorkSpaceInput: CreateWorkSpaceInput!) {
    createWorkspace(createWorkSpaceInput: $createWorkSpaceInput) {
      w_id
    }
  }`;

Create folder model and then create file workspace.ts:

Create type then export these:

export type WorkSpacesInfo = {
  workspace_id: string,
  workspace_name: string,
}

export type WorkSpaces = {
    workspaces: [WorkSpacesInfo],
    current_workspace_id: string,
}

export type WId = {
    w_id: string,
}

export type Name = {
    name: string,
}

-To do with query/mutation Vue graphql:

In template tag:

<div class="form-body">
    Mutation create workspaces
    <div class="input-field">
      <input type="text" v-model="name" placeholder="enter the name" />
    <button @click="addWorkspace">ADD Workspace</button>
  </div>
</div>
<div v-if="loading">
    <h2>LOADING...</h2>
  </div>
<div v-else-if="error">{{error}}</div>
<div class="workpaces-list"  v-else-if="workspaces">
  <transition-group name="list" tag="ul">
      <h2>Workspaces</h2>
      <li>
        <div class="description">
            <p> <span> current workspace id: </span>{{workspaces.workspaces?.current_workspace_id}}</p>
        </div>
      </li>
      <li v-for="workspace in workspaces.workspaces?.workspaces" :key="workspace.id">
        <div class="description">
          <p>{{workspace}}</p>
        </div>
      </li>
  </transition-group>
</div>

Import package and execute query/mutation:

import { defineComponent, ref } from 'vue'
import { useQuery, useResult, useMutation } from "@vue/apollo-composable";
import {WorkSpaces, WId } from '../model/workspaces'
import {GET_WORKSPACES, ADD_WORKSPACE} from '../graphql/workspaces'

export default defineComponent({
  data() {
    return {
      name:''
    }
  },
  methods: {
    addWorkspace: function() {
      this.createWorkspace({ createWorkSpaceInput: {
      name: this.name
      } });
    }
  },
  setup() {
    const { result, loading, error } = useQuery<{workspaces: WorkSpaces}>(GET_WORKSPACES);
    const workspaces = useResult( result, [], data => data );
    const { 
      loading: m_loading,
      error: m_error,
      mutate: createWorkspace
    } =  useMutation(ADD_WORKSPACE, {
      update: (cache, { data: {createWorkspace} }) => {
        const data: any = cache.readQuery({ query: GET_WORKSPACES });
      }
    });
    return {
      workspaces,
      result,
      loading: loading || m_loading,
      error: error || m_error,
      createWorkspace,
    };
  },
})

Create style for UI:

.workpaces-list {
  max-width: 960px;
  margin: 40px auto;
}
.workpaces-list ul {
  padding: 0
}
.workpaces-list li {
  list-style-type: none;
  background: white;
  border-radius: 4px;
}
.workpaces-list h2 {
  margin: 0 0 10px;
  text-transform: capitalize;
}
.salary {
  display: flex;
}
.salary img {
  width: 30px;
}
.salary p {
  color: #17bf66;
  font-weight: bold;
  margin: 10px 4px;
}
.list-move {
  transition: all 1s;
}
.form-body {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 5px;
}
.input-field {
  width: 700 px;
  margin: 0 auto;
}
.input-field input {
  height: 29px;
}

-Run project:

  yarn serve

-Link example Hexabase Vue Graphql github:

Example: Hexabase Vue Graphql

Get Started​

Initialize​

Create an application Vue:​

-Install package​

-Config to using typescript and Connect Vue with grahpql through apollo​

-Example Query/Mutation Graphql with Hexabase:​

-Create UI:​

-Create graphql:​

-To do with query/mutation Vue graphql:​

-Run project:​

-Link example Hexabase Vue Graphql github:​