graphql-engine/community/sample-apps/quasar-framework-vue-graphql

quasar-framework-vue-graphql

A boilerplate to get started with Quasar Framework, Hasura GraphQL Engine as a CMS and Postgres as a database using the quasar-cli and vue-apollo module.

Tutorial

• Deploy the GraphQL Engine on Hasura Cloud and setup PostgreSQL via Heroku:

  

• Get the Hasura app URL (say quasar-graphql.hasura.app)

• Create the author table:

  Open Hasura console: visit https://quasar-graphql.hasura.app on a browser Navigate to the Data section in the top nav bar and create a table as follows:

  

• Insert sample data into the author table:

  

  Verify if the row is inserted successfully:

  

• Similarly, create an article table with the following data model: table: article columns: id, title, content, author_id (foreign key to author table's id)

• Clone this repo:

  git clone https://github.com/hasura/graphql-engine
  cd graphql-engine/community/sample-apps/quasar-framework-vue-graphql
  

• Install node modules:

  yarn install
  

• Open src/apollo/index.js and configure Hasura's GraphQL Endpoint as follows:

[...]

    link: createHttpLink({
        uri:
          process.env.GRAPHQL_URI ||
          // Change to your graphql endpoint.
          "<your-Hasura-app-endpoint>",
      }),

[...]

Find the above piece of code and replace <your-Hasura-app-endpoint> with the URL of your Hasura Cloud Project.

• We have defined the GraphQL query for fetching author list in src/layouts/MainLayout.vue.

  • GraphQL query

    const { result, loading, error } = useQuery(gql`
      query {
        author {
          id
          name
        }
      }
    `);
  

  • In pages/Articles.vue, we have defined a GraphQL query for articles:

     <script>
    import { watch } from "vue";
    import { useQuery, useResult } from "@vue/apollo-composable";
    import { useRoute } from "vue-router";
    import gql from "graphql-tag";
    
    export default {
      name: "PageName",
    
      setup() {
        const route = useRoute();
    
        const { result, loading, error, refetch } = useQuery(
          gql`
            query articleQuery($authorId: Int!) {
              article(where: { author_id: { _eq: $authorId } }) {
                id
                title
                content
              }
            }
          `,
          {
            authorId: route.params.authorId,
          }
        );
    
        const articles = useResult(result, null, (data) => data.article);
    
        watch(
          () => route.params.authorId,
          async (newId) => {
            refetch({ authorId: newId });
          }
        );
    
        return {
          articles,
        };
      },
    };
    </script>
    

• Run the app:

  quasar dev
  

• Test the app Visit http://localhost:8080 to view the app

For a detailed explanation on how things work, check out the Quasar Framework documentation.