Fetching data from an API in GraphQL
Вставка
- Опубліковано 16 жов 2024
- Learn how to fetch data from an API to fulfill GraphQL queries.
Code: github.com/ben...
Links from video:
swapi.co/
----
Video Suggestions:
Trello: trello.com/b/m...
Join the Trello board: trello.com/inv...
----
Follow Me Online Here:
GitHub: github.com/ben...
LinkedIn: / benawad
Instagram: / benawad97
Patreon: / benawad
----
Join the Discord: / discord
Twitter: / benawad
#benawad
TikTok: / benawad
----
Follow me online: voidpet.com/be...
#benawad
![ReactJS Course [7] - How To Fetch Data From an API in React](http://i.ytimg.com/vi/je3FTTunyp4/mqdefault.jpg)
This was the video I was looking for, thank you so much Ben
Keep these coming, your videos are always helpful
Dude’s OG on the keyboard shortcuts
I'm just beginning with graphql and already learned a whole new way to use it. Thanks!
You fucking LIFE SAVER!!! I've been looking everywhere for a video like this, thanks man!!!
Cool! I've been wondering about this but had not looked into it yet.
What is your opinion on fetch? It isn't supported by all browser versions is it? It looks like a lot simpler version of ajax.
I like how simple it is, but I'm indifferent about it
I have a requirement to hit graphQL and fetch the data based on the request from SAP PI/PO midleware.. Any idea on how to create the structure in SAP PI
Nice video Ben! 😃👍👍
Hi Ben,
Thanks for the video...
What if you would like to connect the API fetching directly to your front-end... how can it be done?
Are you asking how to do a API request in React?
Ben Awad
yes, React and Apollo Client on the front end...
Ben Awad or once we connect to the API with GraphQL, and connect the GraphQL end point to our front end through Apollo Client, we should be able to query the API?
yeah, so: react -> graphql -> api
You don't need to do any: react -> api
In react you will make only graphql requests.
Hi Ben, Could you please tell me what is the URL for the Playground server [purple icon tab]? I'd like to use it too, but I have a hard time to find it. Thanks
Ben- Fantastic Video!!! Thank you!!! Do you have a video or can you recommend a place to learn how to cache the responses?
I have one video on caching with redis ua-cam.com/video/BM4_IvSjRYw/v-deo.html
but it might be hard to follow if you haven't watched the series.
I don't know of any good articles/tutorials on caching like this, but I'm planning on making some videos on it
nice video! Im curious about the resolver process here (in this instance specifically the second API call of films or homeworld however if this were a DB the same question applies), if you did a query of getPerson but didnt ask for films (or homeworld) in it does it still try to resolve films and/or home world? asked another way will it still do that API call (or hit the DB if this were a DB example) despite not requesting that information in the query? I'm wondering about performance, it would be great if it didnt unless you needed it so it would be one less API call or DB query.
It won't call the resolver unless the user requests that data.
awesome! thanks for the quick reply! love the videos man, you single-handedly taught me GraphQL in my free time so keep up the great work.
That's awesome!
Hi there. I was having trouble doing this for my own project and coudn't seem to run my own code until eventually copying this code, trying to run it and receive the same error. Does the code from 3 years ago changed or can it still work??
check your API end point
Ben, how do you delete everything on a line after your cursor in VSCode. Any shortcut key ?
I'm using the vim plugin which allows all kinds of shortcuts. Deleting the rest of the line can be accomplished by typing `D` (without the backticks)
Yes there is one. To Delete all in left side use cmd+delete and to delete all in right side use cmd+fn+delete
Wow thanks
any idea how to call an api in java spring boot?for graphql.
Thank you! I am looking to use a headless CMS with Gatsby, and there is no GraphQL api for it, so this was exactly what I was looking to do. Do you know how I would get this into Gatsby, or would I need to create a source plugin or something to make it work?
I'm not sure, I'm a noob at Gatsby
Hey Ben! Great video - I have a question for you about your Slack clone series, I have been trying to implement facebook auth with passport instead of email/password - I can see you already have an example made on your github, where you pass the token/refresh from the server to the client as parameters in the url - I was just wondering what the best approach is on the client/React site, to get the tokens from the url and store it in localstorage? :)
If you're using react router, one of the parameters to the route will be the tokens
You could set the token in componentDidMount
Cool thanks for your answer! Would you recommend creating a new component just for grabbing the token and storing it in localstorage and then redirect, or should i just do it in one of my existing components?
I usually create a separate component that redirects
Hey Ben! I decided to start a personal project using anilist.co graphql api, but the structure seems to be quite different, so i wonder if you could make a video on that one! Cheers from Brazil
How's the structure different?
@@bawad Its not separated into something/person/id, its all mixed up, i cant describe it :/
Any update on GraphQL Tools ? Did you use new Playground ?
Two other questions:
The resolveFilms function saves a lot of coding, but it is the exact same function as resolveSpecies, resolveStarships, etc. with the exception of the type. Is there a way to pass type and just use one function?
How would you fetch swapi.co/api/people, which would return all people across multiple pages?
yeah you could create a higher order function:
const createTypeResolver = type => parent => {
const promises = parent[type].map(async url => {
const response = await fetch(url);
return response.json();
});
return Promise.all(promises);
};
const resolveFilms = createTypeResolver('films')
/people you would return an array of people
The higher order function is great - will try that - thanks!!!
My people query below works, but is very slow since it is awaiting each fetch before doing the next. I am trying to figure out how to use Promise.all for the fetches in the for loop, but this may be a question I have for you in your next office hours (love that Patreon option BTW)
async people() {
const perPage = 10
let allResults = []
// Get first page and total number of results
let people = await fetch(`swapi.co/api/people`)
let data = await people.json()
const totalPages = Math.ceil(data.count / perPage)
// Add results to array
allResults = allResults.concat(data.results)
// If the total results is greater than the results per page, get the rest of the results and add to the allResults array
if (data.count > perPage) {
let page = 2
for (page; page
Oh I see the problem now. You could optimize it some by doing Promise.all, but some people are in the same films so you are requesting the same film multiple times which is inefficient. Dataloader would be a good choice to solve this. We can talk about that in office hours if you like.
It's okay to use always graphql?
I think for most cases it's good to us GraphQL
thanks
Mate,
How I can fetch this data from this site: digitransit.fi/en/developers/apis/1-routing-api/ . I have been trying almost 5 days. Did not find any clue. Can you please help me out?
what if API have authorization bearer
you can add it in the header when you fetch
@@bawad where would you make the call to get the auth token and where would the logic of retrieving the token live? think i'd wanna pass the token down to each resolver through the context once it's received and not make the call to get it in every function of my class that extends REST Datasource.
yeah I would put it where you create the context
swapi .co now switch domain to swapi .dev
4:51