frandiox / vue-graphql-enterprise-boilerplate Goto Github PK

A GraphQL ready, very opinionated Vue SPA template for Vue CLI 3

JavaScript 63.79% Perl 0.86% HTML 0.39% Vue 21.97% Shell 0.62% Raku 2.89% SCSS 9.48%

vue-graphql-enterprise-boilerplate's Issues

Create subscriptions for new posts in home page

yarn new view not working

trying the following command
yarn new view --name forgotpassword

results in:
yarn run v1.6.0
$ hygen new view --name forgotpassword
(node:24224) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: Path must be a string. Received undefined
(node:24224) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Done in 0.55s.

Am I missing a npm package? are you able to create new views following the instructions?

update to use Prisma-Client

Hi with the release of Prisma-Client. Should the project be updated to use Prisma-Client?

Auth0 error

Signup via Auth0 works but if I try to login I always get an error:

Error: Not authorized. Could not get signing key: Unable to find a signing key that matches...

Any ideas?

Improve error handling in backend

Use apollo-errors or something similar.

Provide feedback after signup

It should show some message after successful signup and change to the login form. Perhaps it could even login automatically after the signup if auth0 returns enough information/tokens.

uinames.com is not reachable

The site has been down for a year now with no clear sign of being restored and is currently breaking the boilerplate code.

Authentication documentation page

The authentication/authorization documentation page is not referenced in the menu: https://vue-graphql.netlify.com/auth.html

It is rather an important page and a considerable feature of this project.

Load environment variables from different .env files in the backend

Just like Vue CLI does, load .env, .env.[mode] and .env.local.

Forgot password functionality

We need to add a way to recover password

How to mock $apollo in Vue tests

Hello. I'm trying to write jest test for my Vue components but every apollo query is met with an error like this

TypeError: Cannot read property 'queries' of undefined

      110 |   computed: {
      111 |     isLoadingChannels() {
    > 112 |       return this.$apollo.queries.channels.loading || false
          | ^
      113 |     },
      114 |   },

Is there any way I can mock the $apollo object?

I've found some tutorials (another one) but don't know how to apply it to this boilerplate. Any help would be greatly appreciated.

Different lint depending on how you use it.

Hey!

I'm noticing some difference when using yarn lint compared to editor.formatOnSave, I've read the troubleshooting about another extension could be breaking this one, but after a clean install of vscode, yarn and node and only installing recommended extensions by the workspace the problems continues.

Example:

In this code snippet running yarn lint we have this exactly format, but when using editor.formatOnSave it goes different, looking at the log seems that it's not respecting Prettier.

yarn lint

vue-graphql-enterprise-boilerplate/src/router/views/home/index.vue

Lines 35 to 42 in 1a9a296

    
           <h1>Home Page</h1> 
        
           <img class="logo" src="@assets/images/logo.png" alt="Logo" /> 
        
           <h2>Recent Posts</h2> 
        
           <PostList 
        
             v-if="!isLoadingRecentPosts && recentPosts" 
        
             :posts="recentPosts" 
        
             show-author 
        
           />

editor.formatOnSave

<img class="logo" src="@assets/images/logo.png" alt="Logo">
<h2>Recent Posts</h2>
<PostList v-if="!isLoadingRecentPosts && recentPosts" :posts="recentPosts" show-author/>

Thank you!

Extra info:

When testing out the same code snippet with chrisvfritz repository the problem disappear.

Fix e2e tests - Cypress

Move apollo branch to master and change repo name

Problem with mini-css-extract-plugin/sass-loader(?) in CircleCI

When the project runs in CircleCI we get some errors:
I try to find some solutions but without success...

 yarn run v1.7.0
$ cross-env ANALYZE=true yarn build
$ vue-cli-service build


 ERROR  Failed to compile with 6 errors          11:42:42

 error  in ./src/router/views/login/index.vue?vue&type=style&index=0&lang=scss&module=true

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

var colors = require('./colors');
^
      Invalid CSS after "v": expected 1 selector or at-rule, was "var colors = requir"
      in /home/circleci/frontend/node_modules/colors/lib/index.js (line 1, column 1)
    at runLoaders (/home/circleci/frontend/node_modules/webpack/lib/NormalModule.js:303:20)
    at /home/circleci/frontend/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /home/circleci/frontend/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/home/circleci/frontend/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/home/circleci/frontend/node_modules/sass-loader/lib/loader.js:67:13)
    at Object.done [as callback] (/home/circleci/frontend/node_modules/neo-async/async.js:7974:18)
    at options.error (/home/circleci/frontend/node_modules/node-sass/lib/index.js:294:32)

 @ ./src/router/views/login/index.vue?vue&type=style&index=0&lang=scss&module=true 1:0-540 1:556-559 1:561-1098 1:561-1098
 @ ./src/router/views/login/index.vue
 @ ./src/router/routes.js
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./src/main.js

 error  in ./src/app.vue?vue&type=style&index=0&lang=scss

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

var colors = require('./colors');
^
      Invalid CSS after "v": expected 1 selector or at-rule, was "var colors = requir"
      in /home/circleci/frontend/node_modules/colors/lib/index.js (line 1, column 1)
    at runLoaders (/home/circleci/frontend/node_modules/webpack/lib/NormalModule.js:303:20)
    at /home/circleci/frontend/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /home/circleci/frontend/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/home/circleci/frontend/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/home/circleci/frontend/node_modules/sass-loader/lib/loader.js:67:13)
    at Object.done [as callback] (/home/circleci/frontend/node_modules/neo-async/async.js:7974:18)
    at options.error (/home/circleci/frontend/node_modules/node-sass/lib/index.js:294:32)

 @ ./src/app.vue?vue&type=style&index=0&lang=scss 1:0-463 1:479-482 1:484-944 1:484-944
 @ ./src/app.vue
 @ ./src/main.js
 @ multi ./src/main.js

 error  in ./src/router/views/loading/index.vue?vue&type=style&index=0&lang=scss&module=true

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

var colors = require('./colors');
^
      Invalid CSS after "v": expected 1 selector or at-rule, was "var colors = requir"
      in /home/circleci/frontend/node_modules/colors/lib/index.js (line 1, column 1)
    at runLoaders (/home/circleci/frontend/node_modules/webpack/lib/NormalModule.js:303:20)
    at /home/circleci/frontend/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /home/circleci/frontend/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/home/circleci/frontend/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/home/circleci/frontend/node_modules/sass-loader/lib/loader.js:67:13)
    at Object.done [as callback] (/home/circleci/frontend/node_modules/neo-async/async.js:7974:18)
    at options.error (/home/circleci/frontend/node_modules/node-sass/lib/index.js:294:32)

 @ ./src/router/views/loading/index.vue?vue&type=style&index=0&lang=scss&module=true 1:0-540 1:556-559 1:561-1098 1:561-1098
 @ ./src/router/views/loading/index.vue
 @ ./src/router/routes.js
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./src/main.js

 error  in ./src/router/layouts/main.vue?vue&type=style&index=0&lang=scss&module=true

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

var colors = require('./colors');
^
      Invalid CSS after "v": expected 1 selector or at-rule, was "var colors = requir"
      in /home/circleci/frontend/node_modules/colors/lib/index.js (line 1, column 1)
    at runLoaders (/home/circleci/frontend/node_modules/webpack/lib/NormalModule.js:303:20)
    at /home/circleci/frontend/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /home/circleci/frontend/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/home/circleci/frontend/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/home/circleci/frontend/node_modules/sass-loader/lib/loader.js:67:13)
    at Object.done [as callback] (/home/circleci/frontend/node_modules/neo-async/async.js:7974:18)
    at options.error (/home/circleci/frontend/node_modules/node-sass/lib/index.js:294:32)

 @ ./src/router/layouts/main.vue?vue&type=style&index=0&lang=scss&module=true 1:0-518 1:534-537 1:539-1054 1:539-1054
 @ ./src/router/layouts/main.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/router/views/404/index.vue?vue&type=script&lang=js
 @ ./src/router/views/404/index.vue?vue&type=script&lang=js
 @ ./src/router/views/404/index.vue
 @ ./src/router/routes.js
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./src/main.js

 error  in ./src/components/nav-bar.vue?vue&type=style&index=0&lang=scss&module=true

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

var colors = require('./colors');
^
      Invalid CSS after "v": expected 1 selector or at-rule, was "var colors = requir"
      in /home/circleci/frontend/node_modules/colors/lib/index.js (line 1, column 1)
    at runLoaders (/home/circleci/frontend/node_modules/webpack/lib/NormalModule.js:303:20)
    at /home/circleci/frontend/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /home/circleci/frontend/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/home/circleci/frontend/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/home/circleci/frontend/node_modules/sass-loader/lib/loader.js:67:13)
    at Object.done [as callback] (/home/circleci/frontend/node_modules/neo-async/async.js:7974:18)
    at options.error (/home/circleci/frontend/node_modules/node-sass/lib/index.js:294:32)

 @ ./src/components/nav-bar.vue?vue&type=style&index=0&lang=scss&module=true 1:0-500 1:516-519 1:521-1018 1:521-1018
 @ ./src/components/nav-bar.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/router/layouts/main.vue?vue&type=script&lang=js
 @ ./src/router/layouts/main.vue?vue&type=script&lang=js
 @ ./src/router/layouts/main.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/router/views/404/index.vue?vue&type=script&lang=js
 @ ./src/router/views/404/index.vue?vue&type=script&lang=js
 @ ./src/router/views/404/index.vue
 @ ./src/router/routes.js
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./src/main.js

 error  in ./src/components/nav-bar-routes.vue?vue&type=style&index=0&lang=scss&module=true

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

var colors = require('./colors');
^
      Invalid CSS after "v": expected 1 selector or at-rule, was "var colors = requir"
      in /home/circleci/frontend/node_modules/colors/lib/index.js (line 1, column 1)
    at runLoaders (/home/circleci/frontend/node_modules/webpack/lib/NormalModule.js:303:20)
    at /home/circleci/frontend/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /home/circleci/frontend/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/home/circleci/frontend/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/home/circleci/frontend/node_modules/sass-loader/lib/loader.js:67:13)
    at Object.done [as callback] (/home/circleci/frontend/node_modules/neo-async/async.js:7974:18)
    at options.error (/home/circleci/frontend/node_modules/node-sass/lib/index.js:294:32)

 @ ./src/components/nav-bar-routes.vue?vue&type=style&index=0&lang=scss&module=true 1:0-507 1:523-526 1:528-1032 1:528-1032
 @ ./src/components/nav-bar-routes.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/nav-bar.vue?vue&type=script&lang=js
 @ ./src/components/nav-bar.vue?vue&type=script&lang=js
 @ ./src/components/nav-bar.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/router/layouts/main.vue?vue&type=script&lang=js
 @ ./src/router/layouts/main.vue?vue&type=script&lang=js
 @ ./src/router/layouts/main.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/router/views/404/index.vue?vue&type=script&lang=js
 @ ./src/router/views/404/index.vue?vue&type=script&lang=js
 @ ./src/router/views/404/index.vue
 @ ./src/router/routes.js
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./src/main.js

 ERROR  Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Exited with code 1

Unit testing Vue components

Server as mock-api

Question

The server can be ignored or used as a mock-api as chris does in his boilerplate, since my team will work in another stack for the backend?

I really liked your way of integrating graphql inside of it, but I was just looking for something with just GraphQL integrated with it.

Thank you @frandiox!

Remove Auth0 implementation.
Remove Prisma implementation (maybe).
Include Graphql-faker to run with tests using predefined GraphQL IDL.

Improve docs for backend stack

Show posts and profiles

Show recent posts on the homepage
Show user posts and new post form in user profiles

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

	<h1>Home Page</h1>
	<img class="logo" src="@assets/images/logo.png" alt="Logo" />
	<h2>Recent Posts</h2>
	<PostList
	v-if="!isLoadingRecentPosts && recentPosts"
	:posts="recentPosts"
	show-author
	/>