Search⌘ K
AI Features
Home
Courses
Building Full Stack Applications with GraphQL

Using Variables in GraphQL Queries

Explore how to dynamically use variables in GraphQL queries within a React application using Apollo Client. Learn to define queries with variables, pass them using the useQuery hook, and implement navigation links using React Router for efficient frontend interaction.

We'll cover the following...

In the first lesson of this chapter, we defined a few routes in our application, all with different rendering components. One of those routes allows us to display all products posted by a particular user.

Using path parameters

If you recall the first lesson of this section, we’ve defined a few routes in our application, all different rendering components. One of these routes that we’ve added allows us to display all products posted by a particular user:

JavaScript (JSX)
<Switch>
    ...
    <Route path="/author/:userName">
      <ProductsByUser />
    </Route>
    ...
    <Route path="/">
      <AllProducts />
    </Route>
</Switch>

This means that if a user navigates to http://localhost:3000/author/peter, the page should display all products published by a user with the username peter.

When React Router renders a component for a specified path, it’ll pass path arguments to the rendered component. Before implementing a GraphQL query, we need to see how we can read this parameter’s value in our component by using the useParams function.

JavaScript (JSX)
import {
  useParams
} from 'react-router-dom'
export default function ProductsByUser() {
  const { userName } = useParams()
  // We can use the "userName" parameter
}

Sending a query

The question is now, how do we pass this parameter to our query? We can’t just declare a static query ...