Query the car list

To start routing a car and consumption model is required. Learn how to provide a list of cars to be able to select the right consumption model.

Requirements

  • Chargetrip API key - to fetch all vehicles instead of a subset.
  • A Mapbox API key - to display the map
  • URQL - a lightweight graphQL client

Steps to take

  1. Use the carList query to retrieve a list of cars. GraphQL will allow for only fetching the fields that are needed. The filter and search argument can be used to improve the way of how to look up vehicles. Use the page and size argument to implement pagination. To improve performance even more, the thumbnail image of the vehicle is used.
  2. After fetching the data, an intersectionObserver needs to be implemented to support endless scroll pagination.
  3. With everything set up, it's time to render the list of cars alongside the filters and search onto the screen.

Next steps

With the carList up and running, it's possible to retrieve additional car details. This will be explained in our next example.

  • 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
          /* eslint-disable max-len */import { createClient, defaultExchanges } from '@urql/core';import { groupCars } from './interface';import { carListQuery } 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 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],}); /** * The function that handles all our GraphQL networking alongside it's parameters. * @param { Object } - Object that manages the page, size and search to be send towards our request * @param { number } page - Number of the page we are on * @param { number } size - Number of cars that we should fetch in one request * @param { string } search - The keywords that we should filter our car list on * @param { array } availability - An array of availability statuses, currently only picking up cars that are no longer for sale or currently active. */export const getCarList = ({ page, size = 10, search = '', availability = [0, 1] }) => {  client    .query(carListQuery, { page, size, search, availability })    .toPromise()    .then(response => {      groupCars(response.data?.carList);    })    .catch(error => console.log(error));};