This content originally appeared on Level Up Coding - Medium and was authored by Noah Fischer
Backendless Coin Price List with GraphQL API, Serverless Redis, and Next.JS
In this tutorial, we will develop a simple coin price list using GraphQL API of Upstash. You can call the application backendless because we will access the database directly from the client (javascript). See the code.
Motivation
We want to give a use case where you can use the GraphQL API without any backend code. The use case is publicly available read only data for web applications where you need low latency. The data is updated frequently by another backend application, you want your users to see the last updated data. Examples: Leaderboards, news list, blog list, product list, top N items in the homepages.
1- Project Setup:
Create a Next application: npx create-next-app.
Install Apollo GraphQL client: npm i @apollo/client
2- Database Setup:
If you do not have one, create a database following this guide. Connect your database via Redis CLI and run:
rpush coins '{ "name" : "Bitcoin", "price": 56819, "image": "https://s2.coinmarketcap.com/static/img/coins/64x64/1.png"}' '{ "name" : "Ethereum", "price": 2130, "image": "https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png"}' '{ "name" : "Cardano", "price": 1.2, "image": "https://s2.coinmarketcap.com/static/img/coins/64x64/2010.png"}' '{ "name" : "Polkadot", "price": 35.96, "image": "https://s2.coinmarketcap.com/static/img/coins/64x64/6636.png"}' '{ "name" : "Stellar", "price": 0.506, "image": "https://s2.coinmarketcap.com/static/img/coins/64x64/512.png"}'3- Code:
In the Upstash console, copy the read only access key in your API configuration page (GraphQL Explorer > Configure API). In the _app.js create the Apollo client and replace the your access key as below:
You need to use Read Only Access Key, because the key will be accessible publicly.
Edit index.js as below:
4- Run:
Run your application locally: npm run dev
5- Live:
Go to http://localhost:3000/ ?
Originally published at https://docs.upstash.com.
Backendless Coin Price List with GraphQL API, Serverless Redis and Next.JS was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Noah Fischer
Noah Fischer | Sciencx (2021-04-20T03:07:20+00:00) Backendless Coin Price List with GraphQL API, Serverless Redis and Next.JS. Retrieved from https://www.scien.cx/2021/04/20/backendless-coin-price-list-with-graphql-api-serverless-redis-and-next-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.