# Getting Started
This tutorial will get you up and running with data access from KYVE in your React application.
Get familiar with GraphQL
The Kyve Data Access API is available only in GraphQL (opens new window). GraphQL is a query language for API's and an alternative to REST API's. If you are not familiar with GraphQL, you can read an introduction here (opens new window).
Select Your Endpoint
Select an endpoint from the list here, depending on what kind of data you would like to retrieve from Kyve.
- Create a new React App with Create React App (opens new window)
npm install @apollo/client graphql
# Using Apollo-Client in your App
Now that you have installed the required dependencies and set up a basic React app, you can get started by initializing your
ApolloClient gives you an abstraction layer and an interface to the Graphql server.
src/index.js with the following:
In this section, you follow the basic setup for the Apollo Client. Notice how the client is connecting to the Evmos-EVM endpoint. You can find more endpoints here.
# Fetching data from KYVE
To fetch data from KYVE, you will need to specify a basic query that queries for Evmos-EVM-Transactions. The query below fetches the hash and blockNumber
If you go to the appropriate EVM endpoint here, you should see a GraphiQL GraphQL playground. You can copy and paste the query above and hit the run button to see results.
As you can see, the GraphQL query returns the
blockNumber for each block.
Next up, you are building a component that uses Apollo's
useQuery-Hook. For this example,
you will render the hashes and the block number of a transaction into a list.
At last you are registering the above component into your app
You can now run
npm start to see the app in action.
# Next steps
Now that you've successfully accessed data from Kyve, you can further explore the GraphQL syntax to construct potentially more complicated queries.