/svelte-apollo-app

Primary LanguageHTML

svelte-apollo-app

A sample Svelte 3 app to demonstrate usage of GraphQL Queries, Mutations and Subscriptions with svelte-apollo, Hasura GraphQL engine and Postgres as database. Forked from the standard svelte template

Deploy Hasura

  • Deploy Postgres and GraphQL Engine on Azure using Container Instances:

    Deploy to heroku

    Please checkout the docs for other deployment methods

  • Get the Container Instance URL (say my-app.westus.azurecontainer.io)

  • Create author table:

    Open Hasura console: visit http://my-app.westus.azurecontainer.io/console on a browser
    Navigate to Data section in the top nav bar and create a table as follows:

    Create author table

  • Insert sample data into author table:

    Insert data into author table

    Verify if the row is inserted successfully

    Insert data into author table

  • 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) and created_at

    Create foreign key for author_id column to author's id

  • Now create a relationship from article table to author table by going to the Relationships tab.

    Create a relationship from article table to author table

  • Clone this repo:

    git clone https://github.com/beasync/svelte-apollo-app

Setup App

Install the dependencies...

yarn
  • Open src/apollo.js and configure Hasura's GraphQL Endpoint as follows:
  const wsLink = new WebSocketLink({
    uri: "ws://localhost:8080/v1/graphql",
    options: {
      reconnect: true,
      lazy: true
    },
    connectionParams: () => {
      return { headers: getHeaders() };
    },
  });

  const httpLink = new HttpLink({
    uri: "http://localhost:8080/v1/graphql",
    headers: getHeaders()
  });

Replace the uri argument with your Hasura GraphQL Endpoint for both wsLink and httpLink

Start Rollup:

yarn dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

Deploying to the cloud

With Azure

Deploy to Azure using the static website hosting in Azure Storage. See the docs.