I watched and practiced most of your videos. Lost of coding-along, frustration and doubts. It all finally cemented into my brain and I breezed through my coding test. Just want to let you know that you upgraded my life 😭😭😭😭
I am so happy that I found your Crash Course because I am so lazy to see courses with higher hours. 😅. This was such a valuable and short course learned... Thank you so much...
Question about the lazy querying. I can see that the query was---at first---delayed until we actually selected the "Search" button. However, after you selected it once, it looked like the query was getting executed just when you changed the input and no longer needed to select the "Search" button. For example, ~59 minutes in when you change it from Annie -> Rick Sanchez. Can you explain what's going on here?
Nice question. The reason was he use the useState Hook. If the property "name" is changed in value, the component wil re-render itself. He used the search bar onchange function that's why it triggers to change the value "name". Because name is linked to the name property. If you care for performance don't do his way. There are some techniques that you can do to make it more efficient. Overall there are no mistake on his code. I hope this help
hey, i had same doubt that behavior kind of makes sense if you think about it. i have found the right method getLocations({ variables: { name } }); instead of passing variable object to hook, pass it when you actually want to call the query. and it will work as expected. its been long but I'm posting it if anyone else might have same doubt.
Great content, I was able to replicate it with my django graphql endpoint after a few adjustments (mostly datatypes and the react router dom v6 changes). Thank you so much.
Hey @Lane Cunningham. Can you say which course have you bought and share your opinion about it. I really like the way how he teaches and considering buy one of his courses as well. Thanks :)
Do you know why do I still get the error: import Routes '"react-router-dom"' has no exported member named 'Routes'. Did you mean 'Route'?ts(2724) Even if I did this command; npm install react-router-dom@latest ? and also imported: import { Route, Routes } from "react-router-dom";
Awesome video. Small problem. When calling the useCharacters() @31.37, error message saying " export 'useCharacters' (imported as 'useCharacters') was not found in '../hooks/useCharacters' (possible exports: default)". And I followed exactly to the video. I checked 20 times lol but same problem. Any suggestions?
Was just coming back to watch your older graphql tuto and I see this :D Is there any chance that you will do some graphql with redux tuto in the futur?
Hi Laith, may i request WebSocket crash course ? It feel little bit complicated as i learn it, wonder if you can make it easier just like any other crash course! Thank you very much
I am new to GraphQL, but coming in with decent amount of experience on JavaScript and REST API. Maybe I am missing something fundamental, but I have the feeling the Apollo Client is not only making things more cumbersome, but also architecturally wrong. It's very common requiring a real-world app to interact with multiple web API endpoints hosted on different URLs. How can it be done with AC? Furthermore, JavaScript's fetch method is all it takes to issue all types of GQL query HTTP requests with React and each request is independent. The plain GQL query in JSON is very easy to compose and sent in the HTTP POST payload. Using the gql template makes things unnecessary more complicated.
Great content as always 👏🏻 I am confused about caching concept in Apollo Client, can you please clear one doubt. API response is stored in cache and from there it is served to the app. But how does the cache stays up to date with latest data from backend? Does it send some network requests in background? If so, then isn't that costly because we are sending unnecessary requests and may be the data doesn't change that often at backend but we are continuously sending API requests? Can you please clear that how the cache stays up-to-date and how does the Apollo client knows when to fetch data from cache and when from the server?
When your data changes, like in a mutation, you can actually request Apollo to reset the cache. Ben has a good video on this: ua-cam.com/video/lQ7t20gFR14/v-deo.html
@@laithacademy Thank you so much for getting back. My question is a little different. Let's suppose no mutation happens from the app. Data is returned from the cache if the cache has the data. But how does Apollo client ensures that there is always updated data in cache?
@@Atif1702 Typically this is handled in one of two ways. Either you sync the cache with the updated data or you run a cron job (every 15min let's say) that makes a request to the backend and puts that data in the cache instead. If you have many users in your application, the requests the cache saves you far exceeds the requests you would do on the job
I found a solution: just added a reference to the input field: "const inputRef = useRef();" And then changed state after button click using input field reference: "setName(inputRef.current.value);" I don't know if this is the ideal solution (I'm Java-backender and new in React), but it works for me: import {useRef, useState} from "react"; import {gql, useLazyQuery} from "@apollo/client"; const GET_CHARACTER_LOCATIONS = gql` query GetCharacterLocations($name: String!){ characters(filter: {name: $name}) { results { location { name } } } } `; export default function Search() { const [name, setName] = useState(); const inputRef = useRef(); const [getLocations, {loading, data, error, called}] = useLazyQuery(GET_CHARACTER_LOCATIONS, { variables: { name, } }); const handleSearch = () => { setName(inputRef.current.value); getLocations(); } console.log(loading, data, error, called); return (
10:31 connect react with graphql server through Apollo-Client 13:06: InMemoryCache: cache the query into cache for next API calls 18:32 how to qeury from Graphql server
In the end you said something like " There is a a great reason not to use custom hooks for useLazyQuery, but you didn't explain it". So, can someone explain that.
Awsm content... Really helpful unable to write query for the individual data and it really helped !! bte in that variables variables{id: id} short form is used... in case any one not getting actually I wasn't getting and i was getting error then suddenly it came to my mind
I followed the tutorial step by step but my search page is not working properly....When clicking on search the locations don't appear, but when I delete a letter, the query is launched....Can you help ?
NOTE - React Router version has been updated now.- If you use as shown @35:00 then the render wont display. Please use a previous version of React Router like 5.2.0 to see this working correctly
@@laithacademy So we need to build a Facade like pattern , wherein we have GraphQL server that deals with RESTful calls and sends back the data. Correct me if I am wrong.
i folowed exactly what you did, yet, am havung this error "Missing field 'token' while writing result {}", Its really fustrating, Kindly help me out with it
unexpected apollo client api calling, like- i got a id form react useParam, it should be call frist time only but if change any other state, gql query calling api every time
I watched and practiced most of your videos. Lost of coding-along, frustration and doubts. It all finally cemented into my brain and I breezed through my coding test. Just want to let you know that you upgraded my life 😭😭😭😭
nah dude you upgraded your life, he just helped!
This is the best GraphQL coding-along video I have seen thus far and I am convinced to use it now.😜
Your channel is so underrated. Thanks for all your courses
You're very good at explaining things in an easy to understand way
The way you explain it is just so stunning. It’s simplified at its finest. Very 👍🏻
Best React With GraphQL crash course in UA-cam❤
just at the right moment , I'm starting a new project and i'll need to learn graphQl. good mind reader
I understood more of GrraphQL and Apollo from your video, Thank you
Enjoy this course so much, easy to understand! Thank you once again Laith =))
A great one to start with. Fewer jargons and clear explanation.
one hell of a tutoarial bro it clicked in one shot thanks a lot
I am so happy that I found your Crash Course because I am so lazy to see courses with higher hours. 😅. This was such a valuable and short course learned... Thank you so much...
thanks, that was exactly what i was looking for, just note , i think even a lazy query can be in a separate custom hook
very easy and very practically explained, great work- loved it👍
Amazing course to Learn GQL,
Thanks to you 💜
Yo bro, this was fucking fantastic! When your course drops in price (due to my lack of money atm), buying it for sure!
this is the best video for learn graphql client
Thank you ❤👏👏
You made the GraphQL sooo easy
Thank you bro. This is really great. I will take it from here with apollo documentation
This is a great tutorial. Learnt about the basics of GraphQL pretty quickly. Thanks a lot.
It's simple and informative. Thanks!!
Really amazing crash crouse, thanks Laith Academy.
You makes it easy to me now i'm start to learn it,thanks
Question about the lazy querying. I can see that the query was---at first---delayed until we actually selected the "Search" button. However, after you selected it once, it looked like the query was getting executed just when you changed the input and no longer needed to select the "Search" button. For example, ~59 minutes in when you change it from Annie -> Rick Sanchez. Can you explain what's going on here?
Nice question.
The reason was he use the useState
Hook.
If the property "name" is changed in value, the component wil re-render itself.
He used the search bar onchange function that's why it triggers to change the value "name". Because name is linked to the name property.
If you care for performance don't do his way.
There are some techniques that you can do to make it more efficient.
Overall there are no mistake on his code.
I hope this help
hey, i had same doubt that behavior kind of makes sense if you think about it.
i have found the right method
getLocations({
variables: {
name
}
});
instead of passing variable object to hook, pass it when you actually want to call the query. and it will work as expected.
its been long but I'm posting it if anyone else might have same doubt.
It help me a lot this video! Thank you so much!
This video really helped me. Thank you very much!
Great content, I was able to replicate it with my django graphql endpoint after a few adjustments (mostly datatypes and the react router dom v6 changes). Thank you so much.
Fantastic free content! Thank you! I just bought your Udemy course. Looking forward to starting it.
Hey @Lane Cunningham. Can you say which course have you bought and share your opinion about it. I really like the way how he teaches and considering buy one of his courses as well. Thanks :)
Great work, this is really helpful. My question here is how to get the actual error from graphql
The crash course I didn't know I needed 💯
Excellent. Thank you so much.
Fantastic. Just what I needed.
2023 update: Don't use Switch, write your code like this =>
{" "}
{" "}
{" "}
Do you know why do I still get the error: import Routes
'"react-router-dom"' has no exported member named 'Routes'. Did you mean 'Route'?ts(2724)
Even if I did this command; npm install react-router-dom@latest ?
and also imported: import { Route, Routes } from "react-router-dom";
@@rekameszaros1753 Are you coding in JS or TS?
Great tutorial. Thank so much!
Awesome video. Small problem. When calling the useCharacters() @31.37, error message saying " export 'useCharacters' (imported as 'useCharacters') was not found in '../hooks/useCharacters' (possible exports: default)". And I followed exactly to the video.
I checked 20 times lol but same problem. Any suggestions?
Great job and staying on task and keeping it simple.
good explanations ,keep going.the udemy course is with actual tech stack till now ?do u think to update it soon?
Was just coming back to watch your older graphql tuto and I see this :D Is there any chance that you will do some graphql with redux tuto in the futur?
Hi Laith, may i request WebSocket crash course ? It feel little bit complicated as i learn it, wonder if you can make it easier just like any other crash course! Thank you very much
Could you tell, why we don't use hooks when it comes to lazy queries? Is about this array returning from this function instead of object?
I am new to GraphQL, but coming in with decent amount of experience on JavaScript and REST API. Maybe I am missing something fundamental, but I have the feeling the Apollo Client is not only making things more cumbersome, but also architecturally wrong. It's very common requiring a real-world app to interact with multiple web API endpoints hosted on different URLs. How can it be done with AC? Furthermore, JavaScript's fetch method is all it takes to issue all types of GQL query HTTP requests with React and each request is independent. The plain GQL query in JSON is very easy to compose and sent in the HTTP POST payload. Using the gql template makes things unnecessary more complicated.
You're doing great bro 👊
Thanks, make video about graphql type autogen for typescript.
Thanks for your tutorial brother
Liking before watching!
awesome learned a lot thank you.
Thank you for making these videos!
It was very helpful. Thank you. ⭐⭐⭐⭐⭐
Great content as always 👏🏻
I am confused about caching concept in Apollo Client, can you please clear one doubt.
API response is stored in cache and from there it is served to the app. But how does the cache stays up to date with latest data from backend? Does it send some network requests in background?
If so, then isn't that costly because we are sending unnecessary requests and may be the data doesn't change that often at backend but we are continuously sending API requests?
Can you please clear that how the cache stays up-to-date and how does the Apollo client knows when to fetch data from cache and when from the server?
When your data changes, like in a mutation, you can actually request Apollo to reset the cache. Ben has a good video on this:
ua-cam.com/video/lQ7t20gFR14/v-deo.html
@@laithacademy Thank you so much for getting back. My question is a little different.
Let's suppose no mutation happens from the app. Data is returned from the cache if the cache has the data. But how does Apollo client ensures that there is always updated data in cache?
@@Atif1702 Typically this is handled in one of two ways. Either you sync the cache with the updated data or you run a cron job (every 15min let's say) that makes a request to the backend and puts that data in the cache instead. If you have many users in your application, the requests the cache saves you far exceeds the requests you would do on the job
@@laithacademy Thanks 😊
hi laith , if possible could you make a aws s3 crash course like you did for lambda?
I'd love to see subscriptions sometime soon.
really helpful video thnks mate
Thank you very much! But I have a question: how to prevent the search method from being called every time I type a letter in the text field?
I found a solution: just added a reference to the input field: "const inputRef = useRef();" And then changed state after button click using input field reference: "setName(inputRef.current.value);" I don't know if this is the ideal solution (I'm Java-backender and new in React), but it works for me:
import {useRef, useState} from "react";
import {gql, useLazyQuery} from "@apollo/client";
const GET_CHARACTER_LOCATIONS = gql`
query GetCharacterLocations($name: String!){
characters(filter: {name: $name}) {
results {
location {
name
}
}
}
}
`;
export default function Search() {
const [name, setName] = useState();
const inputRef = useRef();
const [getLocations, {loading, data, error, called}] = useLazyQuery(GET_CHARACTER_LOCATIONS, {
variables: {
name,
}
});
const handleSearch = () => {
setName(inputRef.current.value);
getLocations();
}
console.log(loading, data, error, called);
return (
Search
{loading && spinner...}
{error && something went wrong}
{data && (
{data.characters.results.map((character) => {
return {character.location.name}
})}
)}
);
}
Good Practice !
10:31 connect react with graphql server through Apollo-Client
13:06: InMemoryCache: cache the query into cache for next API calls
18:32 how to qeury from Graphql server
The bouy did the job.!
Great crash course, thanks
Thanks bro. You made my day
very good tutorial!!! can you please give the link to code?
Perfect!
enjoyed the lesson thank u
This kind of reminds me of React Query or RWS in Next Js
Splendid job
great explanation!
If you do a udemy course on graphql I will be the first to buy it! Btw do you already have an udemy channel with some courses by any chance?
Started like its a tutorial by Traversy Academy because of the intro.
In the end you said something like " There is a a great reason not to use custom hooks for useLazyQuery, but you didn't explain it". So, can someone explain that.
Awesome.
dude is a god developer!!!
can you please tell me how to do price range query
Hi @Laith Academy, Do you forgot to list the source code for this video?
Awsm content... Really helpful unable to write query for the individual data and it really helped !!
bte in that variables variables{id: id} short form is used... in case any one not getting actually I wasn't getting and i was getting error then suddenly it came to my mind
THANK YOU SO MUCH!
thanks
Great content ,Thank you
I'll buy your graphql course!
coming soon!!
@@laithacademy you better not use Hasura on the backend... hint hint
nice man!
Great work Sir. When should we be expecting a Vue version? Thanks 😊.
Thank you so much
won't we need to call use query inside useEffect hook?
Thankyou so much!
Great to listen at 1.5x speed
Why can't I see 'SCHEMA' and 'DOCS' option on right?
Where is the link to udemy course?
Any way to make this work with class components?
nice
subscription broadcast apollo with react and gql
good one
I followed the tutorial step by step but my search page is not working properly....When clicking on search the locations don't appear, but when I delete a letter, the query is launched....Can you help ?
Merci.
code pls ?!
where we can find the source code?
please wrap it all.
Is this relevant for Next 13 too? Or outdated?
NOTE - React Router version has been updated now.- If you use as shown @35:00 then the render wont display. Please use a previous version of React Router like 5.2.0 to see this working correctly
Yes. but instead using the previous version, you can change to as react-router-dom defined when you import it first
Can GraphQL be used with a REST server which is not a GraphQL server ?
Absolutely, GraphQL is typically paired with multiple REST microservices
@@laithacademy So we need to build a Facade like pattern , wherein we have GraphQL server that deals with RESTful calls and sends back the data. Correct me if I am wrong.
Next how to use apollo cache as replacement for redux
Apollo be like: " I will bring PHP in every language"
i folowed exactly what you did, yet, am havung this error "Missing field 'token' while writing result {}", Its really fustrating, Kindly help me out with it
I need to see the code
unexpected apollo client api calling, like- i got a id form react useParam, it should be call frist time only but if change any other state, gql query calling api every time