I am currently developing an app using React with next.js.
There is a GraphQL query that I need to run in order to retrieve some data, but I seem to be encountering some issues.
When I use the useQuery hook as shown below, it successfully returns the response:
import { useQuery } from 'react-apollo';
export function LaunchesFunctionTwo() {
const { loading, error, data } = useQuery(GET_SUBSCRIPTION_BY_ID)
// The data is logged correctly here
console.log(data)
// Since I only require the data without displaying it, I am returning an empty string
// This raises another question - how can I solely utilize the useQuery hook itself?
return ''
}
However, when I implement the same code in the Index component, the console.log(data) outputs undefined:
import { useQuery } from 'react-apollo';
export default function Index(props) {
const { loading, error, data } = useQuery(GET_SUBSCRIPTION_BY_ID)
// Consequently, the returned data is undefined
console.log(data)
return (<div>...</div>)
}
UPDATE: I have managed to resolve this issue. After reading that Hooks should only be used in specific ways, one being "Call Hooks from custom Hooks," I created a custom hook like so:
According to the documentation, the use keyword is necessary:
export function useLaunchesFunctionTwo() {
const { loading, error, data } = useQuery(GET_SUBSCRIPTION_BY_ID)
return data
}
Now, in my index.js file, I simply invoke the useLaunchesFunctionTwo to obtain the desired data.
The question remains - is this a valid approach? Could I have structured my code in a more organized manner?
Any assistance would be greatly appreciated.