Building a dApp with polkadot.js, React and Typescript: 4 - How to make queries

A way to query information on the blockchain is essential. Here you'll learn how to do it!
--------------------------------------------------------------------------------------------
Resources:
Substrate Framework: substrate.io
Polkadot.js Extension API: polkadot.js.or...
---------------------------------------------------------------------------------------------
Gear:
Microphone: EV RE20 Black
Boom Arm: Rode PSA-1
Shock Mount: EV 309A
Audio Interface: SSL2
Camera: Sony A7C
Lenses: Sigma 24-70mm F2.8 DG DN

[@denisvradiy8503]

Great videos!! Keep creating more web3 content!

[@Skylla54]

Translation from React to Vue as the following:
```vue
/*Imports*/
import { ApiPromise, WsProvider } from "@polkadot/api";
import { web3Accounts, web3Enable } from "@polkadot/extension-dapp";
import { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";
import { onMounted, ref, watch } from "vue";
/*consts*/
const NAME = "GMOrDie";
/*Refs*/
let apiRef = ref();
let accounts = ref();
let selectedAccount = ref();
let selectedAccountAddress = ref("");
let gmgntime = ref();
let toggle = ref(false);
/*Setup*/
const setup = async () => {
const wsProvider = new WsProvider("wss://ws.gm.bldnodes.org/");
const api = await ApiPromise.create({ provider: wsProvider });
apiRef.value = api;
const getTime = await api.query.currencies.currentTimePeriod();
gmgntime.value = getTime.toPrimitive() as string;
};
/*Setup on Mounted*/
onMounted(() => {
setup();
});
/*handle Conenction on Button click*/
const handleConnection = async () => {
const extensions = await web3Enable(NAME);
if (!extensions) {
throw Error("NO_EXTENSION_FOUND");
}
const allAccounts = await web3Accounts();
accounts.value = allAccounts;
if (allAccounts.length === 1) {
selectedAccount.value = allAccounts[0];
selectedAccountAddress.value = allAccounts[0].address;
}
};
/*Set selectedAccountAddress if changed from "" to something*/
watch(
() => selectedAccountAddress.value,
(newVal) => {
if (!newVal) return;
const account = accounts.value!.find(
(account) => account.address == newVal
);
if (!account) {
throw Error("NO_ACCOUNT_FOUND");
}
selectedAccount.value = account;
}
);
/*GMGN Time */
const getGmGnTime = async () => {
const getTime = await apiRef.value!.query.currencies.currentTimePeriod();
gmgntime.value = getTime.toPrimitive() as string;
};


Connect


Choose your Account

{{ account.address }}



Thats me: {{ selectedAccountAddress }}



{{ toggle ? "Ok, now I know" : "Show me the time" }}

{{ gmgntime }}

```