Sign in / Sign up
Route Alternative routes

Mutate to create a new route

This example explains how to use our new beta route algorithm.

View on Github

Requirements

Steps to take

  1. Plotting a route starts by executing the createRoute mutation. This mutation requires information about the vehicle, origin and destination. After the mutation is finished executing a route id will be returned.
  2. This id can be used to request route updates through the route subscription. This subscription receives dynamic updates.
  3. After the subscription returns done as status, data can be rendered onto the screen. The polyline and the legs object will be used to display charge stations on the map. Total distance, duration of a trip, consumption are displayed on the side.
  • 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
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
          import { createClient, createRequest, defaultExchanges, subscriptionExchange } from '@urql/core';import { pipe, subscribe } from 'wonka';import { SubscriptionClient } from 'subscriptions-transport-ws';import { createRouteQuery, routeUpdateSubscription } from './queries.js'; /** * Example application of how to build a route with the Chargetrip API. * Please have a look to Readme file in this repo for more details. * * For the purpose of this example we use urql - 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 subscriptionClient = new SubscriptionClient('wss://api.chargetrip.io/graphql', {  reconnect: true,  connectionParams: headers,}); const client = createClient({  url: 'https://api.chargetrip.io/graphql',  fetchOptions: {    method: 'POST',    headers,  },  exchanges: [    ...defaultExchanges,    subscriptionExchange({      forwardSubscription(operation) {        return subscriptionClient.request(operation);      },    }),  ],}); /** * To create a route you need: * * 1. Create a new route and receive back its ID; * 2. Subscribe to route updates in order to receive its details. */export const getRoute = callback => {  client    .mutation(createRouteQuery)    .toPromise()    .then(response => {      const routeId = response.data.createRoute;      if (!routeId) return Promise.reject('Could not retrieve Route ID. The response is not valid.');       const { unsubscribe } = pipe(        client.executeSubscription(createRequest(routeUpdateSubscription, { id: routeId })),        subscribe(result => {          console.log(result);           const { status, recommended } = result.data.route;           // you can keep listening to the route changes to update route information          // for this example we want to only draw the initial route          if (status === 'done' && recommended) {            unsubscribe();            callback(recommended);          }        }),      );    })    .catch(error => console.log(error));};