Mutate to display alternative routes

One route is good, but three routes is better. That's why alternatives can be displayed alongside the preferred route. These alternatives are usually the next fastest route and are easy to implement.

View on Github

Requirements

Chargetrip API key - to plot routes outside this region
Mapbox API key - to display the map
URQL - a lightweight graphQL client

Steps to take

Plotting alternative routes starts by executing the newRoute mutation. This mutation requires information about the car, origin and destination. After the mutation is finished executing a route id will be returned.
This id can be used to request route updates through the routeUpdatedById subscription. This subscription receives dynamic updates.
After the subscription returns done as status, the route and alternatives fields can be used to plot the routes on a map. Both are utilizing the same object so the polyline and the legs object are the ones to display a line and charge stations on a map. Additional data such as distance, duration and consumption can also be rendered per alternative. The route field will always be preferred over the alternatives.

Next steps

Now that everything about basic routing is explained, it's time to add additional features to the route. Let's learn about stations along routes, preferred operators and more in the next examples.

client.js
index.js
interface.js
map.js
queries.js

          import { createClient, createRequest, defaultExchanges, subscriptionExchange } from '@urql/core';import { pipe, subscribe } from 'wonka';import { SubscriptionClient } from 'subscriptions-transport-ws';import { createRoute, routeUpdate } from './queries.js'; /** * 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 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(createRoute)    .toPromise()    .then(response => {      const routeId = response.data.newRoute;      if (!routeId) return Promise.reject('Could not retrieve Route ID. The response is not valid.');       const { unsubscribe } = pipe(        client.executeSubscription(createRequest(routeUpdate, { id: routeId })),        subscribe(result => {          const { status, route, alternatives } = result.data.routeUpdatedById;           // 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' && route) {            unsubscribe();            callback(route, alternatives);          }        }),      );    })    .catch(error => console.log(error));};