@thetransportlab/usethetransportlab v1.0.3

useTheTransportLab

React hooks for interacting with TheTransportLab API

TheTransportLab is an API for retrieving commuting/transport information. This library provides an easy way of working with this data in React and React Native.

Website

https://api.thetransportlab.com/

Query autocomplete

For GQL autocomplete, we recommend using this extension in VSCode:

https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql

After installation of the extension, create a .graphqlrc.yml in your project root with the following content:

schema: "node_modules/usethetransportlab/src/schemas/schema.gql"
documents: "src/**/*.{graphql,gql,js,ts,jsx,tsx}"

You may need to restart VSCode for autocomplete functionality to work.

Basic example - React Native

First, you should place the following at the root of your application:

import { TheTransportLabProvider } from "@thetransportlab/usethetransportlab";

<TheTransportLabProvider apiKey={"your_api_key"}>
  {/* The rest of your app root content */}
</TheTransportLabProvider>;

You can then use the below code sample as an example screen.

This example will retrieve live bus location within 1500 meters of a geographical location every 10000ms, requesting the PublishedLineName, RecordedAtTime, VehicleLocation.Latitude and VehicleLocation.Longitude for each service, and ordering it by latest first ('latest first' means that services with the more recent RecordedAtTime will appear first). This data will be displayed in a FlatList.

import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View, FlatList } from "react-native";
import {
  Query,
  IHookResponse,
  useTheTransportLab,
  gql,
  IBusesWithinAreaVehicleActivityItem,
} from "@thetransportlab/usethetransportlab";
import { Maybe } from "graphql/jsutils/Maybe";

const BusLocationScreen: React.FC<{}> = () => {
  const [services, setServices] = useState<
    Maybe<Maybe<IBusesWithinAreaVehicleActivityItem>[]>
  >([]);
  const {
    data,
    error,
    loading,
  }: IHookResponse<Query> = useTheTransportLab<Query>({
    query: gql`
      query nearLocation(
        $latitude: Float!
        $longitude: Float!
        $distance: Int
        $orderBy: ETheTransportLabBusQueries_Services_NearLocation_OrderBy
      ) {
        thetransportlab {
          bus {
            services {
              nearLocation(
                latitude: $latitude
                longitude: $longitude
                distance: $distance
                orderBy: $orderBy
              ) {
                PublishedLineName
                RecordedAtTime
                VehicleLocation {
                  Latitude
                  Longitude
                }
              }
            }
          }
        }
      }
    `,
    pollFrequency: 10000,
    variables: {
      latitude: 53.478665,
      longitude: -2.249138,
      distance: 1500,
      orderBy: "latest",
    },
  });

  useEffect(() => {
    if (data?.thetransportlab?.bus?.services?.nearLocation) {
      setServices(data.thetransportlab.bus.services.nearLocation);
    }
  }, [data]);

  return (
    <View style={style.root}>
      <FlatList
        data={(services ?? []).slice(0, 10)}
        keyExtractor={(service, index) => {
          return service?.VehicleRef ?? index.toString();
        }}
        contentContainerStyle={{
          padding: 10,
        }}
        renderItem={({ item: service }) => (
          <View style={style.listItem}>
            <View style={style.textRow}>
              <Text style={[style.text, style.textBold]}>Bus Number: </Text>
              <Text style={[style.text]}>
                {service?.PublishedLineName ?? ""}
              </Text>
            </View>
            <View style={style.textRow}>
              <Text style={[style.text, style.textBold]}>Location: </Text>
              <Text style={[style.text]}>
                {[
                  service?.VehicleLocation?.Latitude,
                  service?.VehicleLocation?.Longitude,
                ].join(", ")}
              </Text>
            </View>
            <View style={style.textRow}>
              <Text style={[style.text, style.textBold]}>Time: </Text>
              <Text style={[style.text]}>{service?.RecordedAtTime ?? ""}</Text>
            </View>
          </View>
        )}
      />
    </View>
  );
};

const style = StyleSheet.create({
  textBold: {
    fontWeight: "bold",
  },
  text: {
    fontSize: 24,
    color: "#000",
  },
  root: {
    width: "100%",
    borderRadius: 20,
    overflow: "hidden",
    height: "100%",
    borderWidth: 1,
    borderColor: "rgba(255,255,255,0.2)",
  },
  listItem: {
    paddingVertical: 5,
  },
  textRow: {
    flexDirection: "row",
  },
});

export default screen1;