Query station details
To query the details of astation, a station id is required. This can be passed into the station query. From there, amenities, predicted availability and other details can be used.
View on Github
Requirements
- Chargetrip API key - to fetch stations all over Europe instead of a subset
- Mapbox API key - to display the map
- URQL - a lightweight graphQL client
Steps to take
- Just like the previous example, the stationAround query is used to display stations around a GeoJSON location.
- With stations available on the map, click interactions can be added.
- A click handler on the station icon will initiate the station query. This example will request the chargers, amenities, predicted availability and operator details. More fields are available within the API reference.
- After receiving the data, it will be rendered on the screen.
Next steps
After stations are available on a map, fetching additional station data on interaction is a logical next step. So let's move onto the next example to fetch data such as chargers, predicted availability, amenities or operator details.
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
import { createClient, defaultExchanges } from '@urql/core';import { getStationDataQuery, getStationsAroundQuery } from './queries'; /** * For the purpose of this example we use urgl - lightweights GraphQL client. * To establish a connection with Chargetrip GraphQL API you need to have an API key. * The key in this example is a public one and gives access only to a part of our extensive database. * You need a registered `x-client-id` to access the full database. * Read more about an authorisation in our documentation (https://docs.chargetrip.com/#authorisation). */const headers = { //Replace this x-client-id and app-id with your own to get access to more cars 'x-client-id': '5ed1175bad06853b3aa1e492', 'x-app-id': '623998b2c35130073829b2d2',}; const client = createClient({ url: 'https://api.chargetrip.io/graphql', fetchOptions: { method: 'POST', headers, }, exchanges: [...defaultExchanges],}); /** * Fetch 20 station around the city center of Hamburg, Germany. * We set the radius around the geolocation in which we fetch stations to 3km */export const getStations = () => { return client .query(getStationsAroundQuery, { query: { location: { type: 'Point', coordinates: [9.9801115, 53.5475679] }, distance: 3000, }, }) .toPromise() .then(response => { return response.data?.stationAround; }) .catch(error => console.log(error));}; /** * Fetch the detail data of a specific station * @param { string } id - the id of the station */export const getStationData = id => { return client .query(getStationDataQuery, { stationId: id, }) .toPromise() .then(response => { return response.data; }) .catch(error => console.log(error));};