Sign in / Sign up
Vehicle list Stations

Query the details of a vehicle

After building a vehicle list in the previous example, it's time to learn more about the details of a vehicle. This example serves as a guide on how to display vehicle specific data such as range, performance and images.

View on Github

Requirements

Steps to take

  1. First use the simplified vehicleList query to render a list of vehicles.
  2. Based upon the vehicle id, additional data can be requested by using the vehicle query.
  3. After receiving the additional vehicle data, it can be displayed in the user interface. This time around, the full vehicle image is being used.

Next steps

Now that the vehicle features are explained, it is useful to take a look at stations in the next examples. After the station examples, the fundamentals for EV routing are explained, which allows for actual EV routing.

  • 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 { getVehicleListQuery, getVehicleDetailsQuery } from './queries.js';import { renderVehicleList } from './interface'; /** * 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 an 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 vehicles  'x-client-id': '5ed1175bad06853b3aa1e492',  'x-app-id': '623998b2c35130073829b2d2',}; const client = createClient({  url: 'https://api.chargetrip.io/graphql',  fetchOptions: {    method: 'POST',    headers,  },  exchanges: [...defaultExchanges],}); /** * You can access a list of all available vehicles using the `vehicleList` query. * In this example we use our playground, which has only 12 vehicles available. * Chargetrip operates an extensive database of EV makes, editions, and versions, * each with their specific consumption models. * You need a registered x-client-id to access the full vehicle database. * You can obtain a registered x-client-id on https://account.chargetrip.com/ * **/export const getVehicleList = () => {  client    .query(getVehicleListQuery)    .toPromise()    .then(response => {      renderVehicleList(response.data?.vehicleList);    })    .catch(error => console.log(error));}; /** * You can access more detailed information of a specific vehicle using the `vehicle` query. * This set of data is a limited set of everything that is available. * If you need more you can contact us to get access to our `vehiclePremium` query. * @param { string } vehicleId - the id of the vehicle that we want the details of */export const getVehicleDetails = (vehicleId, callback) => {  client    .query(getVehicleDetailsQuery, { vehicleId })    .toPromise()    .then(response => {      callback(response.data);    })    .catch(error => console.log(error));};