GraphQL Tutorial #26 - Making Queries from React

Hey, in this GraphQL tutorial I'll explain how we can make a query to our GraphQL server from one of our React components.

----- COURSE LINKS:

======== Other Tutorials =========

----- NODE.JS TUTORIALS

----- MONGODB TUTORIALS

----- REACT TUTORIALS

======== Social Links ==========

[nathapon]

and to setting up Apollo Client is exactly the same just follow the previous video
then do this in your child component...

//BookList.js

const getBookQuery = gql`
{
books {
name
id
}
}
`

function BookList() {

const { loading, error, data } = useQuery(getBookQuery);

console.log(data);

if(loading) return <p>Loading....</p>

if(error) return <p>Ops! Something went wrong</p>

return (
<>
<h1>All good, got'em Data!</h1>
</>
)
}

export default BookList;

[NeoCoding]

in 2021 BookList looks like


const getBooks = gql`
{
books {
name
}
}
`;

function BookList() {
const {loading, error, data} = useQuery(getBooks);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error </p>;
console.log(data);
return (
<div>
<ul id="book-list">
{data.books.map(book => (
<li
))}
</ul>
</div>
);
}

export default BookList;

[christopherromeo]

thanks ninja and the community for the updated help

[mabroorahmad]

Now you can use useQuery hook like this:


const EXCHANGE_RATES = gql`
query GetExchangeRates {
rates(currency: "USD") {
currency
rate
}
}
`;

const { loading, error, data } = useQuery(EXCHANGE_RATES);

[francotanzarella]

Great tutorial mr ninja. It is helping me get my head around so many new technologies. Cheers for that.

[ozzyozborne]

Can someone help please!
is it possible to use Class components with the newer version of Graphql? without using {useQuerry}

[sathvikkollu]

Even in the second data object i am getting an error: undefined !! Any idea?

[ahmetdikbayir]

Hello @NetNinja thanks a lot. I have a question: when I try to refresh the page I cannot fetch data, loading is true twice of them. Could you help to me?

[sahilGupta]

The thing what you are doing in the export statement, is it called Currying?

[prasadkadu]

import {graphql } from 'apollo-client' is not working .. it's giving error

[GooseGumlizzard]

So, I only get the one log of Data(with no books in it), I never get the 2nd, so I guess the data is never returned from the server. however I don't have any errors or anything so I don't know what I'm doing wrong. Anyone encounter this?




EDIT: Nevermind, Fernando Fernandes answered below! You need to use cors as a function :


app.use(cors());


i was just writing app.use(cors) and that is why it didn't work

[JosueVader]

i just apply the *apollo-server* to the server app and all works fine :)...no cors needed.

[williammallak]

great tutorial thanks a lot
now you need to add cache property to the client setup to render it right
cache: new InMemoryCache(),

[andikasaputra]

Can you make video about uploading with Apollo client & graphql express?

[stevengibson]

How exactly is the data from getBooksQuery a prop of Booklist? I was under the assumption that props had to be passed from one component to another and it doesn't appear to be within scope.

[RepentantSinner]

So, I only get the one log of Data(with no books in it), I never get the 2nd, so I guess the data is never returned from the server. however I don't have any errors or anything so I don't know what I'm doing wrong.

Can anyone please help me out!

[jaspreetsingh]

The Apollo Client documentation has a little different implementation like import gql from graphql-tag rather than apollo-boost

[MohamedHussein-tohz]

Apollo Client is now distributed as the @apollo/client package
so you can use these lines instead:

[raj]

on production and in the the real word, would GraphHQ and a react app be on different servers?

[AniDormi]

//If you're using a functional component that looks like

function BookList() {
return (
<div>
<h1>stuff</h1>
</div>
)
}

//or

const BookList = () => {
return (
<div>
<h1>stuff</h1>
</div>
)
}

//You'll need to declare them in the callback first and console log without 'this'

function BookList(props) {
console.log(props)
return (
<div>
<h1>stuff</h1>
</div>
)
}

//or

const BookList = (props) => {
console.log(props)
return (
<div>
<h1>stuff</h1>
</div>
)
}

//should work after that