# React: querying with variables

**URL:** <https://community.apollographql.com/t/react-querying-with-variables/7668>\
**Category:** Client SDKs\
**Tags:** client\
**Created:** [June 28, 2024, 3:55am UTC](https://community.apollographql.com/t/react-querying-with-variables/7668 "2024-06-28T03:55:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hernan\_S](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/hernan_s/32/5197_2.png) [@Hernan\_S](https://community.apollographql.com/u/Hernan_S)\
**Post date:** [June 28, 2024, 3:55am UTC](https://community.apollographql.com/t/react-querying-with-variables/7668/1 "2024-06-28T03:55:03Z")

</div>

hi there apollo community, i have a problem while fetching my graphql api, first of all i already cheked that everything is working fine while on apollo sandbox, on the client side i had no problem on quering without variables, or using mutation to create data. the problem comes when i wanna fetch one result on client (like i said i could fetch one result with a variable id on server side with apollo sandbox).  
what i wanna do is click on card from a list of cards and redirect it to display all the info from that card.  
here is my code:

```auto
#news.jsx

import { gql, useQuery } from '@apollo/client'
import { useLayoutEffect } from 'react'

export default NewsPage(){
const GET_NEWS = gql`
  query{
    getAllNews{
      id
      title
      thumbnail
    }
  }
`
const {loading,error,data} = useQuery(GET_NEWS);
return (
    <div className='news'>
      {data.getAllNews?.map((news) => (
        <div key={news.id}>
          <img src={news.thumbnail} alt={news.title} />
          <h1 className='title'>{news.title}</h1>
          <Link to={`/noticia/${news.id}`}>
            <button>read more</button>
          </Link>
        </div>
      ))}
    </div>
  )
}

```

i have no problem on rendering the query get\_news data but when i click the button i get redirected to the newsDetail component with the correct id eg: “localhost:5173/news/6539a70f547734d8a868fb51”  
but when i try rendering the data i got an error that says: **Variable “$getNewsById” of required type “ID!” was not provided.**  
and here is the code from newsDetailComp:

i imported my custom hook from custom-hooks.js here is the code:

```auto
import { useQuery, gql } from '@apollo/client'

const GET_NEWS = gql`
    query GetNews($getNewsById: ID!) {
        getNews(id: $getNewsById) {
            id
            title
            content
            thumbnail
            createdAt
        }
    }
`
export const useNews = (id) => {
    const { loading, error, data } = useQuery(GET_NEWS ,
         { 
            variables: { id } 
        });
    return {
        loading,
        error,
        data
    }
}

```

```auto
import {useNews} from './custom-hooks';
import {useParams} from 'react-router-dom';

export default function Details() {
    const {id} = useParams();
    
    const {data,loading,error} = useNews(id);
    
    if (loading) return <p>loading...</p>
    if (error) return <p>Error {error.message}</p>
    return (
        <div> 
          <h1>{data.title}</h1>
            <img src={data.thumnail} alt={data.title} />
            <p>{data.createdAt}</p>
            <h1>{data.content}</h1>
        </div>
    )
}

```

the thing is when i use `console.log(id)` i get the id 6539a70f547734d8a868fb51 but the data wont display instead it shows the error **Variable “$getNewsById” of required type “ID!” was not provided.** what im i doing wrong. **Thanks for reading!**.

---

<div class="post-metadata">

**Author:** ![jerelmiller](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jerelmiller/32/3314_2.png) [@jerelmiller](https://community.apollographql.com/u/jerelmiller)\
**Post date:** [June 28, 2024, 2:48pm UTC](https://community.apollographql.com/t/react-querying-with-variables/7668/2 "2024-06-28T14:48:50Z")

</div>

Hey @Hernan_S 👋

It looks like you’ve named your variable `getNewsById` with this line:

```auto
query GetNews($getNewsById: ID!)

```

but you’re passing in your variable as `id`:

```auto
variables: { id } 

```

Try either renaming the variable in your query to `id` or updating the name passed to `useQuery` and it should work:

```auto
query GetNews($id: ID!)

// or

variables: { getNewsById: id }

```

Hope this helps!

---

<div class="post-metadata">

**Author:** ![Hernan\_S](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/hernan_s/32/5197_2.png) [@Hernan\_S](https://community.apollographql.com/u/Hernan_S)\
**Post date:** [June 29, 2024, 8:33pm UTC](https://community.apollographql.com/t/react-querying-with-variables/7668/3 "2024-06-29T20:33:17Z")

</div>

THANK YOU SO MUCH it finally works!!!