graphql-engine/community/sample-apps/svelte-apollo

svelte-graphql-app

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

Create new Hasura Cloud project

• Create new Hasura Cloud project with the Try a free database with Heroku option.

  Please check out our docs for the detailed steps.

• Get the app URL (something like https://<my-project-name>.hasura.app)

• Create author table:

  Open your Hasura Cloud project's console: visit https://<my-project-name>.hasura.app on a browser
  Navigate to Data section in the top nav bar and create a table as follows:

  

• Insert sample data into 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) and created_at

  

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

• Clone this repo:

  git clone https://github.com/hasura/graphql-engine
  cd graphql-engine/community/sample-apps/svelte-apollo
  

Setup App

Install the dependencies...

npm install

• 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 (something like https://<my-project-name>.hasura.app/v1/graphql) for both wsLink and httpLink

Start Rollup:

npm run 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 web

With now

Install now if you haven't already:

npm install -g now

Then, from within your project folder:

now

This will deploy the app on Now 2.0 Platform and you have the Svetle app running live :)