Strapi Crash Course (with React & GraphQL) #11 - Query Variables

Hey gang, in this Strapi tutorial you'll learn how to use query variables in your GraphQL queries.

🐱‍💻 Access the course files on GitHub:

🐱‍👤 Get access to extra premium courses on Net Ninja Pro:

🐱‍💻Starter Project CSS (lesson 5):

🐱‍💻 Full React Course:

🐱‍💻 Social Links:

[Dinos]

For those that had a problem with the query the correct one is
query GetReview($id: ID!) {

review(id: $id) {
data {
id
attributes{
title,
rating,
body
}
}
}
}

[kamalCode]

Sir, please strapi js complete advanced tuotorial

[dannyelo]

Looks much easier with the REST method, any advantage using Graphql?

[tasanee]

Great video!! Really enjoying this series, even with the updates!! Here is the code I adjusted to get it going:

import React from "react";
import { useParams } from "react-router-dom";

const GET_REVIEW = gql`
query GetReview($id: ID!) {
review(id: $id) {
data {
id
attributes {
title
rating
body
}
}
}
}
`;

export default function ReviewDetails() {
const { id } = useParams();
const { loading, error, data } = useQuery(GET_REVIEW, {
variables: { id: id },
});

if (loading) {
return <p>Loading...</p>;
} else if (error) {
return <p>Error! Something went wrong...</p>;
}

const review = data.review.data;

return (
<div>
<div className="review-card">
<div


</div>
</div>
);
}

[paveldub]

variables: {id: "undefined"}

how to fix it?

Status 200, but I get this error

[anelabuawad]

its sad how outdated is this list even though its only 1y old, i love this channel but this list is giving me a really hard time

[edgarwu]

Hi Ninja, can we query slug instead of id? I tested several ways, but it doesn't work.

[tomasmatusek]

I'm asking my self if its so comllicated, why even learn it ? Have someone answer?

[tomasmatusek]

Very comlicated :
const REVIEW = gql`
query GetReview($id: ID!) {
review(id: $id) {
data {
id
attributes {
rating
title
body
}
}
}
}
`;

export default function ReviewDetails() {
const { id } = useParams();
const { loading, error, data } = useQuery(REVIEW, {
variables: { id },
});

if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;


return (
<div className="review-card">
<div

<small>console list</small>

{data.review.data.attributes.body.map((paragraph, index) => (
<p
))}
</div>
);
}

[null_excepton]

2023:
<div className="review-card">
<div


<small>console list</small>


</div>