Mutate to display stations along a route

Whenever the recommended stations along the route are not enough, it's possible to show additional stations along the route. To render these, all that is needed is a radius along the route.

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 a route with stations along a route starts by executing the newRoute mutation. This mutation requires information about the car, origin and destination. To support stations along a route, the stationsAlongRouteRadius argument needs to be provided. 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 stationsAlongRoute field can be used to plot stations around the route on the map. Apart from the stationsAlongRoute, the polyline and legs object can be used to display the route and recommended charge stations on the map. Additional data such as distance, duration and consumption are also available.

Next steps

With the stations along the route feature, there will always be a station around the corner. To improve the usability of these stations, preferred operators will be explained in the next step.

          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. * This route will show alternative stations along the route. * Please have a look to Readme file in this repo for more details. * * 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 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.newRoute;      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 => {          const { status, route } = 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);          }        }),      );    })    .catch(error => console.log(error));};