Query the details of a car

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

Requirements

Steps to take

  1. First use the simplified carList query to render a list of vehicles.
  2. Based upon the vehicle id, additional data can be requested by using the car 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 car 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.

  • client.js
  • index.js
  • interface.js
  • map.js
  • queries.js
  • 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 { getCarListQuery, getCarDetailsQuery } from './queries.js';import { renderCarList } 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 cars  '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 cars using the `carList` query. * In this example we use our playground, which has only 12 cars 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 car database. * You can obtain a registered x-client-id on https://account.chargetrip.com/ * **/export const getCarList = () => {  client    .query(getCarListQuery)    .toPromise()    .then(response => {      renderCarList(response.data?.carList);    })    .catch(error => console.log(error));}; /** * You can access more detailed information of a specific car using the `car` 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 `carPremium` query. * @param { string } carId - the id of the car that we want the details of */export const getCarDetails = (carId, callback) => {  client    .query(getCarDetailsQuery, { carId })    .toPromise()    .then(response => {      callback(response.data);    })    .catch(error => console.log(error));};