release: initial release

exploitmik · exploitmik · commit 578853146613 · 2020-04-27T19:03:31.000-03:00
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -0,0 +1,31 @@
+# Boilerplate GraphQL Apollo with Factory Method
+
+## Project setup
+
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+
+```
+yarn run serve
+```
+
+### Compiles and minifies for production
+
+```
+yarn run build
+```
+
+### Run your tests
+
+```
+yarn run test
+```
+
+### Lints and fixes files
+
+```
+yarn run lint
+```
diff --git a/apollo.config.js b/apollo.config.js
@@ -0,0 +1,23 @@
+const path = require('path')
+
+// Load .env files
+const { loadEnv } = require('vue-cli-plugin-apollo/utils/load-env')
+const env = loadEnv([
+  path.resolve(__dirname, '.env'),
+  path.resolve(__dirname, '.env.local')
+])
+
+module.exports = {
+  client: {
+    service: env.VUE_APP_APOLLO_ENGINE_SERVICE,
+    includes: ['src/**/*.{js,jsx,ts,tsx,vue,gql}']
+  },
+  service: {
+    name: env.VUE_APP_APOLLO_ENGINE_SERVICE,
+    localSchemaFile: path.resolve(__dirname, './node_modules/.temp/graphql/schema.json')
+  },
+  engine: {
+    endpoint: process.env.APOLLO_ENGINE_API_ENDPOINT,
+    apiKey: env.VUE_APP_APOLLO_ENGINE_KEY
+  }
+}
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "boilerplate-graphql-apollo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "core-js": "^3.6.4",
+    "vue": "^2.6.11",
+    "vue-apollo": "^3.0.0-beta.11",
+    "vuex": "^3.1.3"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.3.0",
+    "@vue/cli-service": "^4.3.0",
+    "graphql-tag": "^2.9.0",
+    "vue-cli-plugin-apollo": "^0.21.3",
+    "vue-template-compiler": "^2.6.11"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,41 @@
+<template>
+  <div id="app">
+    <h1>Boilerplate GraphQL Apollo</h1>
+  </div>
+</template>
+
+<script>
+import { repositoryFactory } from "@/repository/repositoryFactory.js";
+const charactersRepository = repositoryFactory.get("characters");
+const episodesRepository = repositoryFactory.get("episodes");
+
+export default {
+  name: "Home",
+  data: () => ({}),
+  async mounted() {
+    const character = await charactersRepository.getCharacter({
+      variables: {
+        charId: 2
+      }
+    });
+
+    const characters = await charactersRepository.get({
+      variables: {
+        pageIndex: 1
+      }
+    });
+
+    const episode = await episodesRepository.getEpisode({
+      variables: {
+        episodeId: 3
+      }
+    });
+
+    const episodes = await episodesRepository.get({
+      variables: {
+        pageIndex: 3
+      }
+    });
+  }
+};
+</script>
diff --git a/src/graphql/queries/getCharacter.gql b/src/graphql/queries/getCharacter.gql
@@ -0,0 +1,5 @@
+query getCharacter($charId: ID = 1) {
+  character(id: $charId) {
+    name
+  }
+}
diff --git a/src/graphql/queries/getCharacters.gql b/src/graphql/queries/getCharacters.gql
@@ -0,0 +1,8 @@
+query getCharacters($pageIndex: Int = 1) {
+  characters(page: $pageIndex) {
+    results {
+      name
+      image
+    }
+  }
+}
diff --git a/src/graphql/queries/getEpisode.gql b/src/graphql/queries/getEpisode.gql
@@ -0,0 +1,8 @@
+query getEpisode($episodeId: ID = 1) {
+  episode(id: $episodeId) {
+    name
+    characters {
+      name
+    }
+  }
+}
diff --git a/src/graphql/queries/getEpisodes.gql b/src/graphql/queries/getEpisodes.gql
@@ -0,0 +1,7 @@
+query getEpisodes {
+  episodes {
+    results {
+      name
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,14 @@
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import { createProvider } from "./repository";
+
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  store,
+  apolloProvider: createProvider(),
+  render: h => h(App)
+}).$mount("#app");
diff --git a/src/repository/index.js b/src/repository/index.js
@@ -0,0 +1,92 @@
+import Vue from "vue";
+import VueApollo from "vue-apollo";
+import {
+  createApolloClient,
+  restartWebsockets
+} from "vue-cli-plugin-apollo/graphql-client";
+
+// Install the vue plugin
+Vue.use(VueApollo);
+
+// Name of the localStorage item
+const AUTH_TOKEN = "apollo-token";
+
+// Http endpoint
+const httpEndpoint =
+  process.env.VUE_APP_GRAPHQL_HTTP || "https://rickandmortyapi.com/graphql";
+
+// Config
+const defaultOptions = {
+  // You can use `https` for secure connection (recommended in production)
+  httpEndpoint,
+  // You can use `wss` for secure connection (recommended in production)
+  // Use `null` to disable subscriptions
+  // wsEndpoint: process.env.VUE_APP_GRAPHQL_WS || "ws://localhost:4000/graphql",
+  // LocalStorage token
+  tokenName: AUTH_TOKEN,
+  // Enable Automatic Query persisting with Apollo Engine
+  persisting: false,
+  // Use websockets for everything (no HTTP)
+  // You need to pass a `wsEndpoint` for this to work
+  websocketsOnly: false,
+  // Is being rendered on the server?
+  ssr: false
+};
+
+// Call this in the Vue app file
+export function createProvider(options = {}) {
+  // Create apollo client
+  const { apolloClient, wsClient } = createApolloClient({
+    ...defaultOptions,
+    ...options
+  });
+  apolloClient.wsClient = wsClient;
+
+  // Create vue apollo provider
+  const apolloProvider = new VueApollo({
+    defaultClient: apolloClient,
+    defaultOptions: {
+      $query: {
+        // fetchPolicy: 'cache-and-network',
+      }
+    },
+    errorHandler(error) {
+      // eslint-disable-next-line no-console
+      console.log(
+        "%cError",
+        "background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;",
+        error.message
+      );
+    }
+  });
+
+  return apolloProvider;
+}
+
+// Manually call this when user log in
+export async function onLogin(apolloClient, token) {
+  if (typeof localStorage !== "undefined" && token) {
+    localStorage.setItem(AUTH_TOKEN, token);
+  }
+  if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient);
+  try {
+    await apolloClient.resetStore();
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log("%cError on cache reset (login)", "color: orange;", e.message);
+  }
+}
+
+// Manually call this when user log out
+export async function onLogout(apolloClient) {
+  if (typeof localStorage !== "undefined") {
+    localStorage.removeItem(AUTH_TOKEN);
+  }
+  if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient);
+  try {
+    await apolloClient.resetStore();
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log("%cError on cache reset (logout)", "color: orange;", e.message);
+  }
+}
diff --git a/src/repository/repositories/charactersRepository.js b/src/repository/repositories/charactersRepository.js
@@ -0,0 +1,19 @@
+import { GRAPH_QUERIES_PATH, getGraphFile } from "@/utils/graphql";
+
+export default function({ defaultClient: apollo }) {
+  return {
+    get({ variables }) {
+      return apollo.query({
+        query: getGraphFile(GRAPH_QUERIES_PATH, "getCharacters"),
+        variables
+      });
+    },
+
+    getCharacter({ variables }) {
+      return apollo.query({
+        query: getGraphFile(GRAPH_QUERIES_PATH, "getCharacter"),
+        variables
+      });
+    }
+  };
+}
diff --git a/src/repository/repositories/episodesRepository.js b/src/repository/repositories/episodesRepository.js
@@ -0,0 +1,19 @@
+import { GRAPH_QUERIES_PATH, getGraphFile } from "@/utils/graphql";
+
+export default function({ defaultClient: apollo }) {
+  return {
+    get({ variables }) {
+      return apollo.query({
+        query: getGraphFile(GRAPH_QUERIES_PATH, "getEpisodes"),
+        variables
+      });
+    },
+
+    getEpisode({ variables }) {
+      return apollo.query({
+        query: getGraphFile(GRAPH_QUERIES_PATH, "getEpisode"),
+        variables
+      });
+    }
+  };
+}
diff --git a/src/repository/repositoryFactory.js b/src/repository/repositoryFactory.js
@@ -0,0 +1,21 @@
+import characters from "./repositories/charactersRepository";
+import episodes from "./repositories/episodesRepository";
+import { createProvider } from "./index.js";
+
+const apolloProvider = createProvider();
+
+const repositories = {
+  characters,
+  episodes
+};
+
+const injectParams = Object.entries(repositories).map(([key, fn]) => [
+  key,
+  fn.call(this, apolloProvider)
+]);
+
+const providerInjected = Object.fromEntries(injectParams);
+
+export const repositoryFactory = {
+  get: name => providerInjected[name]
+};
diff --git a/src/store/index.js b/src/store/index.js
@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})
diff --git a/src/utils/graphql.js b/src/utils/graphql.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+> 1%`
	`2`	`+last 2 versions`
	`3`	`+not dead`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +query getCharacter($charId: ID = 1) {
 +  character(id: $charId) {
 +    name
 +  }
 +}