如何在 Vue.js 中使用 BigQuery API

Question

I'm fairly new to Vue.js, but I've built some basic CRUD apps using axios.

What I want to do is use Google Cloud BigQuery to pull in raw data and then display or manipulate it in Vue. My goal is to make a sort of simple data dashboard where you can filter things or display some different insights from a handful of BigQuery queries.

I can install BigQuery API as a dependency from Vue GUI. But after that I'm a little lost. How do I import BigQuery into my code? How do I run the example code to fetch some public data?

I'm also unsure how to include the google credentials. I currently have this line in vue.config.js, but unsure if this is correct:

process.env.VUE_APP_GOOGLE_APPLICATION_CREDENTIALS = '/Google_Cloud_Key/Sandbox-f6ae6239297e.json'

Given the lack of any resources out there for doing this, I also wonder, should I not be trying to retrieve data this way? Should I make an intermediate API that runs the BigQuery queries and then returns JSON to my Vue app?

Answer 1

In order to make requests to the BigQuery API, you need to use a Service Account, which belongs to your project, and it is used by the Google BigQuery Node.js client library to make BigQuery API requests.

First, set an environment variable with your PROJECT_ID which you will use:

export GOOGLE_CLOUD_PROJECT=$(gcloud config get-value core/project)

Next, create a new service account to access the BigQuery API by using:

gcloud iam service-accounts create my-bigquery-sa --display-name "my bigquery service account"

Next, create credentials that your code will use to login as your new service account. Create these credentials and save it as a JSON file ~/key.json by using the following command:

gcloud iam service-accounts keys create ~/key.json --iam-account  my-bigquery-sa@${GOOGLE_CLOUD_PROJECT}.iam.gserviceaccount.com

Set the GOOGLE_APPLICATION_CREDENTIALS environment variable, which is used by the BigQuery API library, covered in the next step, to find your credentials. The environment variable should be set to the full path of the credentials JSON file you created. Set the environment variable by using the following command:

export GOOGLE_APPLICATION_CREDENTIALS="/home/${USER}/key.json"

You can read more about authenticating the BigQuery API .

The following example shows how to initialize a client and perform a query on a BigQuery public dataset. Moreover in the samples/ directory you can find a lot of examples, such as Extract Table JSON, Get Dataset and many more.

I hope you find the above pieces of information useful.