React With GraphQL (Apollo Client) Crash Course 

nah dude you upgraded your life, he just helped!

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";

@@rekameszaros1753 Are you coding in JS or TS?

When your data changes, like in a mutation, you can actually request Apollo to reset the cache. Ben has a good video on this: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lQ7t20gFR14.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 😊

coming soon!!

@@laithacademy you better not use Hasura on the backend... hint hint

Yes. but instead using the previous version, you can change to as react-router-dom defined when you import it first

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.

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} })} )} ); }

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.

I need to see the code