search

riad-azz / instagram-video-downloader

Simple website made with Next.js for downloading instagram videos with an API that can be used to integrate it in other applications.
https://instagram-videos.vercel.app
MIT License
180 stars 75 forks source link

Where is the GraphQL API found? #12

Open GregoryZeng opened 7 months ago

GregoryZeng commented 7 months ago

Hi, I am learning webscraping and just found this awesome project! The code is quite clear and organized and I learnt a lot from it.

Can you share how you discovered the GraphQL API (e.g. the complicated requestData object)?

Thanks again for your great opensource work.

riad-azz commented 7 months ago

Hey there! I'm glad you appreciate the project, even though it's not my proudest I made to to learn javascript and Next.js.

Regarding your question on discovering the GraphQL API and the requestData object, it all comes down to testing and exploring using the developer tools. Here's the breakdown of the process:

  1. Open the developer tools with F12 or Ctrl + Shift + I and navigate to the Networks tab.
  2. Check each request and its response by either reading it directly or searching for keywords of what you are looking for like "posts," "feed," or "media."
  3. The specific endpoint used in the project was found by toggling the Responsive Design Mode in the developer tools which goes to mobile mode and this request popped in my network tab.
  4. Regarding the requestData, I just copied the exact structure from the network tab and began experimenting by tweaking and modifying its parameters.
  5. Determining the data types was done using transform tools website were I just pasted the JSON and got the type.

In summary, continuous testing and exploration in the network tab or script elements are key. Sometimes, data is directly inserted into the script elements without a separate fetch.

Thank you for your kind words about the project! If you have further questions, feel free to ask.

GregoryZeng commented 7 months ago

Hey there! I'm glad you appreciate the project, even though it's not my proudest I made to to learn javascript and Next.js.

Regarding your question on discovering the GraphQL API and the requestData object, it all comes down to testing and exploring using the developer tools. Here's the breakdown of the process:

  1. Open the developer tools with F12 or Ctrl + Shift + I and navigate to the Networks tab.
  2. Check each request and its response by either reading it directly or searching for keywords of what you are looking for like "posts," "feed," or "media."
  3. The specific endpoint used in the project was found by toggling the Responsive Design Mode in the developer tools which goes to mobile mode and this request popped in my network tab.
  4. Regarding the requestData, I just copied the exact structure from the network tab and began experimenting by tweaking and modifying its parameters.
  5. Determining the data types was done using transform tools website were I just pasted the JSON and got the type.

In summary, continuous testing and exploration in the network tab or script elements are key. Sometimes, data is directly inserted into the script elements without a separate fetch.

Thank you for your kind words about the project! If you have further questions, feel free to ask.

Thank you for your patience!