Fix #664: Use API_URL from .env for telescope API

[humphd]

Issue This PR Addresses

Fixes #664

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

This adds an API_URL environment variable, and the logic for using it in various build steps. The API_URL should be one of the URLs we use for our deployments: localhost, staging, or (eventually) production.

You choose the backend you want your frontend to work against by setting this value in your .env, or otherwise setting this environment variable. When you run one of the GatsbyJS cli scrips (build, develop, etc) it will read this value via the code in src/frontend/gatsby-config.js. Here we'll try to load the root .env file, and import any environment variables, then try to pick the correct API_URL to use, falling back to http://localhost:PORT if none is found. This means we don't need the http-proxy-middleware anymore, since it will use whatever URL you specify without the need for proxying.

In our Zeit Now build, I specify that I want it to always use the staging URL. This way our preview deployments will have live data.

In terms of how you consume this variable in the frontend, I did some research and the way Gatsby wants you to do it is via GraphQL to query the sitemetadata. There are two ways to do this:

• using React Hooks, which only works for functional components. See https://www.gatsbyjs.org/docs/use-static-query/
• using <StaticQuery>, which can work for any component (e.g., ES6 class), but requires you to pass data as props. See https://www.gatsbyjs.org/docs/static-query/

I did both because we use both methods in our tree, and now there are examples and reusable code (the custom hook) we can reuse.

I've never used either of these before, so it's possible I'm doing some of it wrong. Check my work.

[humphd]

It looks like the Zeit Now setup worked using this: https://telescope-9ykv7wjv6.now.sh/

[manekenpix]

Tested locally with your branch.
I tried API_URL=http://localhost:3000 and API_URL=https://dev.telescope.cdot.systems.
Both 👍

[humphd]

I've rebased this to fix a conflict and will merge now.