Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Where is the GraphQL API found? #12

Open
GregoryZeng opened this issue Jan 29, 2024 · 2 comments
Open

Where is the GraphQL API found? #12

GregoryZeng opened this issue Jan 29, 2024 · 2 comments

Comments

@GregoryZeng
Copy link

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
Copy link
Owner

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
Copy link
Author

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants