Cheerio Binance Leaderboard scrape - web-scraping

Hello I am trying to scrape some leaderboard postions from several traders.
Somehow I can catch all contents from tables all around the internet but not from this very Binance site, somehow I do not get any return. I dont even get a response how many table rows there are in this code snippet. Is something different with the table on the traders positons? I dont really know why I cant scrape this very data.
const axios = require("axios");
const cheerio = require("cheerio");
const express = require("express")
async function getTradeFeed() {
try {
const siteUrl = "https://www.binance.com/en/futures-activity/leaderboard?type=myProfile&encryptedUid=CCF3E0CB0AAD54D9D6B4CEC5E3E741D2"
const { data } = await axios({
method: "GET",
url: siteUrl,
})
const $ = cheerio.load(data)
const elemSelector = '#__APP > div > div:nth-child(2) > div.css-gnqbje > div.css-1bypc10 > div > div.css-2a3hpu > div > div > div > table > thead > tr'
$(elemSelector).each((parentIdx, parentElem) => {
console.log(parentIdx)
})
} catch (err) {
console.error(err)
}
}
getTradeFeed();

You can use this API. And its documentation.
This is a sample code that gets all positions from CCF3E0CB0AAD54D9D6B4CEC5E3E741D2 trader:
const axios = require("axios");
const options = {
method: 'GET',
url: 'https://binance-futures-leaderboard1.p.rapidapi.com/v1/getOtherPosition',
params: {
encryptedUid: 'CCF3E0CB0AAD54D9D6B4CEC5E3E741D2',
tradeType: 'PERPETUAL'
},
headers: {
'X-RapidAPI-Host': 'binance-futures-leaderboard1.p.rapidapi.com',
'X-RapidAPI-Key': 'YOUR-API-KEY'
}
};
axios.request(options).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.error(error);
});

Related

Retrieve data from the firebase dynamic link

Im trying to get the data from the generated firebase dynamic link.
I passed Id while generating the dynamic link. I need to get the particular id from the generated dynamic link. Can you please help me.
Where it generates link as :https://thejyotistore.page.link/jNngseAasXzE5SuSA
const ShareLink = ({
fallbackUrl, id, product }) =>
{
const buildLink = async () =>
{
let link = await axios({
method: "POST",
url:
`https://firebasedynamiclinks
.googleapis.com/v1/shortLinks?
key=AIzaSyDNZvtkjAqf8c9esg
gSEzV2 L7. 3vEUv1FfQ`,
headers: {
"Content-Type":
"application/json",
},
data: {
dynamicLinkInfo: {
domainUriPrefix: `https://thejyotistore.page.link`,
link: `https://youtube.com/${id}`,
androidInfo: {
androidPackageName: "com.jyotistore.main",
},
},
},
});
if (link.status === 200 && link.data.hasOwnProperty("shortLink")) {
console.log(link.data.shortLink);
return link.data.shortLink;
}
};
const shareLink = async () =>
{
let shareUrl;
try {
shareUrl = await buildLink();
console.log(shareUrl);
} catch (error) {
console.log(error);
}
try {
if (shareUrl !== "") {
const result = await Share.share({
message: `Hey, ${"\n \n"}I would like to invite you to check out this New App from Jyoti Store. ${"\n \n"} ${product}Download the App now: ${"\n \n"} ${shareUrl}`,
});
}
} catch (error) {
console.log(error);
}
};

When I use the method from composable twice, it works weird

I created a composable as follows to attach a header whenever I use the useFetch function.
export const useCommon = () => {
async function useFetchToken(api: string, option: useFetchTokenTyle){
const autoOption:any = {
headers: (option.headers) ?? { Authorization: 'Bearer ' + ado_token.value }
}
...
return await useFetch(api, {...option,...autoOption})
}
return {
useFetchToken
}
}
and I use this useFetchToken composable twice in one
<script setup lang="ts">
const { useFetchToken } = useCommon()
let {data:category_lists, refresh:cateRefresh} = await useFetchToken('/api/action', {
baseURL: CATEGORY_API,
method: 'post',
body: {
action: 'DoSomeThing',
}
})
let {data:section_lists, refresh:sectionRefresh} = await useFetchToken('/api/action', {
baseURL: CATEGORY_API,
method: 'post',
body: {
action: 'DoSomeThing2',
}
})
Then, a strange result occurs.
"category_lists" affect from second useFetchToken composable.
"category_lists" is overwritten by 2nd useFetchToken composable.
When I delete 2nd useFetchToken part, "category_lists" work correctly.
When I change useFetchToken to useFetch, it will work well all.

Next.js ApolloError Only absolute URLs are supported

I followed this video tutorial
https://youtu.be/JUEw1yHJ8Ao?t=715
at this time i have an error Only absolute URLs are supported
Server Error
Error: Only absolute URLs are supported
This error happened while generating the page. Any console logs will be displayed in the terminal window.
my code:
import { ApolloClient, InMemoryCache, createHttpLink, gql } from '#apollo/client'
import { setContext } from '#apollo/client/link/context'
export async function getServerSideProps() {
const httpLink = createHttpLink({
uri: 'https://api.github.com/graphql',
})
const authLink = setContext((_, { headers }) => {
return {
headers: {
...headers,
authorization: `Bearer ${process.env.GITHUB_ACCESS_TOKEN}`,
}
}
})
const apolloClient = new ApolloClient({
uri: authLink.concat(httpLink),
cache: new InMemoryCache()
});
const { data } = await apolloClient.query({
query: gql`
{
user(login: "mygithublogin") {
avatarUrl(size: 36)
gists(privacy: PUBLIC, last: 10) {
totalCount
nodes {
createdAt
url
stargazerCount
}
}
login
}
}
`
})
console.log(data);
return {
props: {
}
};
}
help please 🙋‍♂️

Update Component after post new item to the Database

I am playing around with Sveltekit and I am struggling a bit..
So my problem is, when I add something to the DB it works, but the new Item does not show in the list until i Refresh the page. My Code looks like:
index.js
import { connectToDatabase } from '$lib/db';
export const post = async ({ request}) => {
const body = await request.json()
console.log(body)
const dbConnection = await connectToDatabase();
const db = dbConnection.db;
const einkaufszettel = db.collection('Einkaufszettel')
await einkaufszettel.insertOne({
name: body.newArticle
});
const einkaufsliste = await einkaufszettel.find().toArray();
return {
status: 200,
body: {
einkaufsliste
}
};
}
export const get = async () => {
const dbConnection = await connectToDatabase();
const db = dbConnection.db;
const einkaufszettel = db.collection('Einkaufszettel')
const einkaufsliste = await einkaufszettel.find().toArray();
console.log(einkaufsliste)
return {
status: 200,
body: {
einkaufsliste,
}
};
}
and the Script of index.svelte
<script>
import Title from '$lib/title.svelte'
export let einkaufsliste = []
let newArticle = ''
const addArticle = async () => {
const res = await fetch('/', {
method: 'POST',
body: JSON.stringify({
newArticle
}),
headers: {
'Content-Type': 'application/json'
}
})
fetchArticles()
}
async function fetchArticles() {
const res = await fetch('/')
console.log(res.body)
}
</script>
In the Network Preview Tab the new Item is already added to the List.
As you can read here, you need to reassign the einkaufsliste after fetching the list of elements from the API.
You can do this in your fetchArticles method, like this:
async function fetchArticles() {
einkaufsliste = await fetch('/')
}

How do you do server side rendering with nextjs [id].js in headless wordpress? fetch single page using graphql from Wordpress. like service/[id].js

I have a nextjs project that is using apollo graphql to fetch data from the backend. I am trying to render my page using server side rendering. But I am currently using graphql apollo hooks to fetch my data from the backend, and the react hooks prevents me from calling my backend inside of the getServerSideProps.
Create and fetch single page using graphql from Wordpress with clean URLs like services/[id].js
N.B: Warning Show ( Error: Response not successful: Received status code 500)
import {
gql,
ApolloClient,
InMemoryCache
} from "#apollo/client";
export const client = new ApolloClient({
uri: 'https://.........../graphql',
cache: new InMemoryCache()
});
const serviceDetail = (serviceOutput) => {
return (
<div>
{serviceOutput.serviceTitle}
{serviceOutput.serviceContent}
</div>
)
}
export const getServerSideProps = async (context) => {
const result = await client.query({
query: gql`
query serData($id: id!) {
HomePage: pageBy(uri: "https://......./home/") {
aboutSection {
serviceSec(id: $id) {
id
serviceTitle
serviceContent
serviceImage {
sourceUrl
}
}
}
}
}
`,
variables: {
id: context.params.id
}
})
return {
props: {
serviceOutput: result.data.HomePage.aboutSection.serviceSec;
},
};
}
export default serviceDetail;
i am not an expert, but as far i have used. you cannot use Apollo together with next js fetching method(ssg,ssr,isr).
Apollo runs queries on client side, and can be used with useQuery and useLazyQuery. while next js fetching is completely different.
I will demonstrate 2 ways here.
-- Using Apollo --
const FETCH_ALL = gql`
query MyQuery($first: Int!, $after: String) {
posts(first: $first, after: $after) {
edges {
node {
title
}
}
}
}
`;
export default function LoadMoreList() {
const { data } = useQuery(FETCH_ALL, {
variables: { first: 5, after: null },
notifyOnNetworkStatusChange: true,
});
return (
<>
<div>
{postdata.map((node, index) => {
{
return (
<div key={index}>
<h1>{node?.node?.title}</h1>
</div>
);
}
})}
</div>
</>
)}
=== using fetch and getStaticProps ==
--File1 (this is a fetch function, to which you pass your queries and variables)
async function fetchAPI(query, { variables } = {}) {
const headers = { "Content-Type": "application/json" };
const res = await fetch(process.env.WP_API, {
method: "POST",
headers,
body: JSON.stringify({ query, variables }),
});
const json = await res.json();
if (json.errors) {
console.log(json.errors);
throw new Error("Failed to fetch API");
}
return json.data;
}
export default fetchAPI;
-- File2 (this is a file that contains your query)
import fetchAPI from "./fetching";
export async function homeheadposts() {
const data = await fetchAPI(
`
query homeheadposts {
posts(first: 7) {
edges {
node {
id
slug
title
featuredImage {
node {
sourceUrl
}
}
excerpt(format: RAW)
}
}
}
}
`
);
return data?.posts;
}
-- File3 (place this function , where you wanna call and use the data, )
export async function getStaticProps() {
const latestPosts = await homeheadposts();
return {
props: { latestPosts },
};
}
export default function CallingData({ latestPosts }) {
console.log(latestPosts);
return <h1>hello</h1>;
}

Resources