No time? Learn by doing in the GraphQL Playground! 🚀

wiewarm.ch GraphQL

GraphQL wrapper for the wiewarm.ch RESTful API. Thanks to GraphQL just get the data you need or want.

Getting started

1. Learn the schema by playing with the data in the Playground.
2. Have a look at the client implementations or choose a client implementation from the GraphQL clients implementations.
3. Use the server url https://wiewarm-graphql.raphaelgosteli.now.sh/
4. Let's go! 🤗

Examples

Queries

Bad

Search for a bad

Query {
  search(query: "Thun"){
    id
    name
    location
  }
}

Run in Playground →

Get the name, temperature and the prettified date of a bad by it's id.

Query {
  bad(id: 5) {
    name
    becken {
      temp
      datePretty
    }
  }
}

Run in Playground →

Bads

Get all bad and show their id, location and becken info.

Query {
  bads {
    id
    location
    becken {
      status
      type
    }
  }
}

Run in Playground →

Client implementations

Android

Have a look at the Android example → by @wauchi using the Apollo Android client.

Angular

No time? Have a look at the example project. Angular example →

Add the apollo angular implementation to your angular project.

ng add apollo-angular

Change constant uri in the src/app/graphql.module.ts to

const uri = 'https://wiewarm-graphql.raphaelgosteli.now.sh'

Query the data using the Apollo Client method watchQuery

src/app.component.ts

apollo.watchQuery({
      query: gql`
        {
          bads {
            id
            name
            location
            becken {
              name
              temp
            }
          }
        }
      `
    }).valueChanges.subscribe(result => {
      this.bads = result.data && result.data.bads;
      this.loading = result.loading;
      this.error = result.errors;
    })

Load the data into a template by iterating through the list of bad as shown in the example.

src/app.component.html

<div *ngIf="bads">
    <div *ngFor="let bad of bads">
      <div class="bad">
        <p class="bad-id">#{{bad.id}}</p>
        <h2>{{bad.name}}</h2>
        <p class="location">{{bad.location}}</p>

        <table>
            <tr>
              <th>Becken</th>
              <th>Temperatur</th> 
            </tr>
            <tr *ngFor="let becken of bad.becken">
              <td>{{becken.name}}</td>
              <td>{{becken.temp}}°C</td> 
            </tr>
          </table>
      </div>
    </div>
</div>

Schema

Badi

type Bad {
  id: Int
  name: String
  address1: String
  address2: String
  canton: String
  plz: String
  location: String
  long: Int
  lat: Int
  becken: [Becken]
}

Becken

type Becken {
  id: Int
  name: String
  temp: String
  status: String
  typ: String
  date: String
  datePretty: String
}