Moralis DashBoard datas with react

I have dashboard in moralis
My table name is NFTTab
in this table I have 4 eventsā€™ variable

{
      "anonymous": false,
      "inputs": [
        {
          "indexed": true,
          "internalType": "uint256",
          "name": "x",
          "type": "uint256"
        },
        {
          "indexed": true,
          "internalType": "uint256",
          "name": "y",
          "type": "uint256"
        },
        {
          "indexed": true,
          "internalType": "uint256",
          "name": "price",
          "type": "uint256"
        },
        {
          "indexed": false,
          "internalType": "enum Dots.Types",
          "name": "new_country",
          "type": "uint8"
        }
      ],
      "name": "Transfer",
      "type": "event"
    }

How could I view my data in react page?
I install react-moralis in index.js
import { MoralisProvider } from ā€˜react-moralisā€™;
and
I use
import { useMoralis,useMoralisQuery } from ā€œreact-moralisā€; in app.js
How could I view my datas ?

You can check out the docs on how to use queries / useMoralisQuery for fetching data. And then you can render the fetched data in a component.

Hello
https://jpxhlk9e1jlo.usemoralis.com:2053/server
project name is NFT
My table name is NFTTab
This code gives error

import { useMoralisQuery } from "react-moralis";

export default function App() {
  const { fetch } = useMoralisQuery(
    "NFTTab",
    (query) => query.equalTo("new_country"),
    [],
    { autoFetch: false }
  );

  const basicQuery = async () => {
    const results = await fetch();
    alert("Successfully retrieved " + results.length + " monsters.");
   
    
  };

  return <button onClick={basicQuery}>Call The Code</button>;
}

ispanyolca

what should this line do?

what is the error that you get?

I would like to list my new_country variables in list

I have 10 records I would like to list these records in react

try to do a query first without any filter first, that should get you all the data from the database for first 100 rows

this is index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { MoralisProvider } from 'react-moralis';



const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
<MoralisProvider serverUrl="https://jpxhlk9e1jlo.usemoralis.com:2053/server" appId="2WFmCJbij5EsognWqDz4z8YzUCfFFnkPgRVkkQN1">
    <App />
    </MoralisProvider>
  </React.StrictMode>
);


this is app.js


export default function App() {
  const { fetch } = useMoralisQuery(
    "NFTTab",
    (query) => query.equalTo("new_country"),
    [],
    { autoFetch: false }
  );

  const basicQuery = async () => {
    const results = await fetch();
    alert("Successfully retrieved " + results.length + " monsters.");
   
    
  };

  return <button onClick={basicQuery}>Call The Code</button>;

}

what you expect for this line to do?

dear
I would like to see my records
how can I see 10 records in moralis database in my NFTTab?

you can also check this documentation:

const { data, error, isLoading } = useMoralisQuery(ā€œGameScoreā€);
GameScore is table name ?

yes, that is the table name

1 Like

Thank you for your kindly response

1 Like