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...
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
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 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.
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.
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?
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
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
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.
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?
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 ?
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 (
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";
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
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.
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: th-cam.com/video/lQ7t20gFR14/w-d-xo.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 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
@@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.
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 TH-cam❤
Enjoy this course so much, easy to understand! Thank you once again Laith =))
I understood more of GrraphQL and Apollo from your video, Thank you
just at the right moment , I'm starting a new project and i'll need to learn graphQl. good mind reader
very easy and very practically explained, great work- loved it👍
one hell of a tutoarial bro it clicked in one shot thanks a lot
A great one to start with. Fewer jargons and clear explanation.
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
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!
Thank you ❤👏👏
You made the GraphQL sooo easy
Thank you bro. This is really great. I will take it from here with apollo documentation
thank you for clear and detailed explanation
this is the best video for learn graphql client
The crash course I didn't know I needed 💯
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
This is a great tutorial. Learnt about the basics of GraphQL pretty quickly. Thanks a lot.
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 :)
It's simple and informative. Thanks!!
You makes it easy to me now i'm start to learn it,thanks
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.
It help me a lot this video! Thank you so much!
Really amazing crash crouse, thanks Laith Academy.
This video really helped me. Thank you very much!
You're doing great bro 👊
Fantastic. Just what I needed.
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.
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?
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
Great job and staying on task and keeping it simple.
Great tutorial. Thank so 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?
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
Thank you for making these videos!
Liking before watching!
It was very helpful. Thank you. ⭐⭐⭐⭐⭐
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.
Excellent. Thank you so much.
Why can't I see 'SCHEMA' and 'DOCS' option on right?
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?
awesome learned a lot thank you.
can you please tell me how to do price range query
Great crash course, thanks
code pls ?!
Thanks bro. You made my day
Any way to make this work with class components?
hi laith , if possible could you make a aws s3 crash course like you did for lambda?
Thanks for your tutorial brother
Great work, this is really helpful. My question here is how to get the actual error from graphql
where we can find the source code?
great explanation!
won't we need to call use query inside useEffect hook?
Splendid job
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 ?
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}
})}
)}
);
}
really helpful video thnks mate
Hi @Laith Academy, Do you forgot to list the source code for this video?
Good Practice !
good explanations ,keep going.the udemy course is with actual tech stack till now ?do u think to update it soon?
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?
enjoyed the lesson thank u
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
Where is the link to udemy course?
Great content ,Thank you
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.
Perfect!
Thanks, make video about graphql type autogen for typescript.
nice man!
THANK YOU SO MUCH!
very good tutorial!!! can you please give the link to code?
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:
th-cam.com/video/lQ7t20gFR14/w-d-xo.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 😊
Awesome.
dude is a god developer!!!
The bouy did the job.!
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
I'd love to see subscriptions sometime soon.
Great work Sir. When should we be expecting a Vue version? Thanks 😊.
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.
Is this relevant for Next 13 too? Or outdated?
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?
I'll buy your graphql course!
coming soon!!
@@laithacademy you better not use Hasura on the backend... hint hint
Thankyou so much!
Thank you so much
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
good one
This kind of reminds me of React Query or RWS in Next Js
thanks
Started like its a tutorial by Traversy Academy because of the intro.
nice
Merci.
Source code?
Apollo be like: " I will bring PHP in every language"
Next how to use apollo cache as replacement for redux
subscription broadcast apollo with react and gql