React: querying with variables

Help
1

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:

#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:

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

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!.

2

Hey @Hernan_S :wave:

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

query GetNews($getNewsById: ID!)

but you’re passing in your variable as id:

variables: { id }

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

query GetNews($id: ID!)

// or

variables: { getNewsById: id }

Hope this helps!

1 Like
3

THANK YOU SO MUCH it finally works!!!