I have been trying to use the together with a getquery in react but I can't get it to work. Below is the code I put together
const input = {
id: this.props.Id
};
return (
<div>
<Connect
query={graphqlOperation(getRecords, input)}
subscription={graphqlOperation(onCreateRecords)}
onSubscriptionMsg={onNewRecord}
>
{({data, loading, error}) => {
if (loading) return "Loading"
if (error) return "Error"
const ListRecord = data.getRecords
console.log('ListRecord', ListRecord)
//console.log returns undefined
return <div>...
</div>
}}
</Connect>
</div>
Deos anyone know what I'm doing wrong? Thanks!
It's hard to say based on what you've posted alone. Is there any additional information in the 'data' object?
Also, Have you tried doing:
query={graphqlOperation(getRecords, {input})}
Related
I'm trying to get some weather data from an API, but I always get the same error of not being able to read properties of undefined. I've gone through different tutorials and previously asked issues, but I haven't been able to figure out what I'm doing wrong. Could anyone please give me a hand?
export default function Weather(){
const apiKey = process.env.REACT_APP_API_KEY
const weatherUrl = `http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=Saxthorpe&aqi=no`
const [weatherData, setWeatherData] = useState();
const [error, setError] = useState(null);
useEffect(() => {
(
async function(){
try {
const response = await axios.get(weatherUrl);
setWeatherData(response.weatherData);
} catch (error) {
setError(error);
}
}
)();
}, [])
return (
<div className="weather-feature">
<h1>hi</h1>
<p className="location">{weatherData.location.name}</p>
<p className="temp">{weatherData.current.temp_c}</p>
<p className="weather-desc">{weatherData.current.condition.text}</p>
</div>
)
}
When pulling data like this and rendering components conditional on that data, you should account for situations in which the data is not yet available or null.
Specifically, you're attempting to render this data:
return (
<div className="weather-feature">
<h1>hi</h1>
<p className="location">{weatherData.location.name}</p>
<p className="temp">{weatherData.current.temp_c}</p>
<p className="weather-desc">{weatherData.current.condition.text}</p>
</div>
But it's not going to available on the first render (i.e. weatherData does not have a location property at first, since your default useState value is undefined).
There are many ways around this, and what you choose ultimately depends on your project and preferences.
You can use optional chaining as a simple protection against null references when checking nested properties:
return (
<div className="weather-feature">
<h1>hi</h1>
<p className="location">{weatherData.location?.name}</p>
<p className="temp">{weatherData.current?.temp_c}</p>
<p className="weather-desc">{weatherData.current?.condition?.text}</p>
</div>
Or you can return something else if weatherData is not ready. A good tool for this kind of thing is swr:
import useSWR from 'swr'
function Weather()
{
const { weatherData, error } = useSWR(weatherUrl, fetcher)
if (error) return <div>failed to load</div>
if (!weatherData) return <div>loading...</div>
return <div>hello {weatherData.location}!</div>
}
As a side note, another thing to consider is your useEffect dependencies:
useEffect(() => {
(
async function(){
try {
const response = await axios.get(weatherUrl);
setWeatherData(response.weatherData);
} catch (error) {
setError(error);
}
}
)();
}, [])
With an empty dependency array, your effect runs only on mount and unmount. If you want it to run based on some other variable(s) changing, add those variables to the dependency array.
You can debug to check the response. I think the respose is undefined from
const response = await axios.get(weatherUrl);
response = undefined => can not get weatherData property.
We are using useEffect you can debug on it by F12 in Chrome and see what happen and the reason of this bug. This is better than you come here to ask
Look: weatherData is your state, which is initially... nothing, because you don't pass any data.
So, you cannot access the location field on the first render because it does not exist yet.
It would help if you made sure weatherData exist:
return (
<div className="weather-feature">
<h1>hi</h1>
<p className="location">{weatherData?.location.name}</p>
<p className="temp">{weatherData?.current.temp_c}</p>
<p className="weather-desc">{weatherData?.current.condition.text}</p>
</div>
)
So, I am trying to filter and map an array from the GIPHY api using stored variables in the useState hook.
Here's my code
const [gifdata, setGifdata] = useState([])
const [Search, setSearch] = useState("")
function handleChange(e) {
setSearch(e.target.value)
}
useEffect(()=> {
axios.get(`https://api.giphy.com/v1/gifs/trending?api_key=nKEFKPSILLeIlqLEjqhVsRO8ShxIjfcn&limit=50&rating=g`)
.then(res=>{
setGifdata(res.data)
console.log(res.data)
})
}, [])
const filteringSearch = gifdata.filter(gif=>
gif.title.toLowerCase().includes(Search.toLowerCase()))
return (
<div>
<header className="bg-blue-600">
<div className="logo">
<label htmlFor="logo">DejareX</label>
</div>
</header>
<div className="heroSection mx-auto">
<h1>GIF Collections at it's peak</h1>
<p>loremipsum blah blah blah</p>
<input type="text" placeholder="Search For A GIF" onChange = {handleChange} />
{filteringSearch.map(gif => {
return (
<Gif
key = {gif.id}
gifImgSrc = {gif.images.original.webp}
description = {gif.title}
/>
)
})}
</div>
</div>
)
}
NOTE: CREATED A RANDOMEMAIL ADDRESS TO GET THIS API KEY, Its not for production.
I am new to react, please try put me through as easy as possible
Someone said the data from the api is probably not an array, i rechecked and it seems like it is true. Cause it first returns an object before getting into the array, who can help with fixing that please
As I said, res.data is not an array. axios adds another data layer to the result. Therefore your res.data is not the same as you see in the browser, in fact it is:
{data: Array(50), pagination: Object, meta: Object}
Therefore, changing res.data to res.data.data will solve the issue
Here is a dummy Live Demo
I am new to react and have been debugging this from yesterday and I finally decide to post as I am clueless of what is happening.
The following react code fetches data from the api and then renders it on the UI. But, there are few strange things happening here.
I get error saying as TypeError: Cannot read property 'map' of undefined initially but when I comment out {renderTableData(data)}& save and then again uncomment & save, the data is rendering perfectly on the UI
I am thinking that before even the data gets fetched from API, it is getting passed to the function renderTableData which is why in the console undefined is printed.
Here is the code
export default function TenantList(){
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users').then((response)=>{
return response.json();
}).then((data)=>{
setData(data)
})
},[]);
function renderTableData(data) {
console.log("hello ", data)
return data.map((student, index) => {
const { name, email } = student //destructuring
return (
<tr key={name}>
<td>{name}</td>
<td>{email}</td>
</tr>
)
})
}
return (
<>
<div>
{renderTableData(data)}
</div>
</>
)
}
Please suggest a workaround
You only want to run this function if you have the data, so check for it:
{data && renderTableData(data)}
I did try searching for the same question but all of those were of either angular or unrelated,
I am trying to make a Social app using MongoDB, Express, React, Node, Graphql with Apollo, I am following a video from freecodecamp : Link to the video
In that video everything worked fine but in his deployed version he is having the same error as mine
react_devtools_backend.js:2450 TypeError:
Cannot read property 'getPosts' of undefined
at ae (Home.js:14)
at Jo (react-dom.production.min.js:3274)
link to the deployed app
My Code: I am dropping a link to my github repo containing the whole project : Link to github
repo
Stack Overflow was throwing too many indentation issues so i have linked my github above as there
is too much of code
I'm using semantic-ui for styling
I'm using graphql the fetch posts from MongoDB
Apollo Client for rendering data
This is the error I am getting in the Home.js:
Screen Shot of the error:
Make it simpler to debug, instead:
const {
loading,
data: { getPosts: posts }
} = useQuery(FETCH_POSTS_QUERY);
do:
const { data, loading, error } = useQuery(FETCH_POSTS_QUERY);
if(data) {
console.log(data);
const { getPosts: posts } = data;
}
if(error) {
console.log(error);
return "error"; // blocks rendering
}
this works but not when data is there and not always
"not when data", "not always"??? weird ... 'posts' can be defined only if data exists ... accessing it when undefined will fail, always ... you must check 'data'
You can/should render items (posts) ONLY when:
!loading
AND
data != undefined - if(data) or (data && in JSX
{loading && <h1>Loading posts..</h1>}
{data && (
<Transition.Group>
{posts &&
posts.map((post) => (
<Grid.Column key={post.id} style={{ marginBottom: 20 }}>
<PostCard post={post} />
</Grid.Column>
))}
</Transition.Group>
)}
use this code like this
const { loading, data: { posts } = {} } = useQuery(FETCH_POSTS_QUERY);
You need to define the query operation like:
export const FETCH_POSTS_QUERY = gql`
query GetPosts {
getPosts {
// fields
}
}
`
Alternatively, you can make use of alias to easily reference them.
export const FETCH_POSTS_QUERY = gql`
query GetPosts {
posts: getPosts {
// fields
}
}
`
const {
loading,
data: { posts } // uses alias directly. no need to rename
} = useQuery(FETCH_POSTS_QUERY);
const { loading, data: { getPosts: posts } = {} } = useQuery(FETCH_POSTS_QUERY)
This should solve the problem
THIS WILL WORK
write data.getPosts inside the grid
const { loading ,data , error } = useQuery(FETCH_POSTS_QUERY);
if (error) return Error! ${error.message};
{loading ? (<h1>Loading posts...</h1>)
: (data.getPosts &&
data.getPosts.map((post) => (
<Grid.Column key={post.id} style= {{ marginBottom: 20}}>
<PostCard post={post} />
</Grid.Column>
I am having issue with rendering the REST API response in React. I am able to see the response in console and its working there. But when I am trying to render it in UI, I am getting an error which says TypeError: Cannot read property 'State' of undefined .
I have snipped the required code and here it is.
render() {
const { getdetails } = this.state;
const itemID = 'ITAINUAT69-8982';
if (!getdetails ) {
return <div>Loading Please Wait...</div>;
}
else {
return (
<div>
{getdetails.itemID.State} // when trying to render directly, not working
// also not working in loop.
{/*
<ul>
{getdetails.itemID.map((detail, index) => (
<li key={detail.index}>
{detail.State}
</li>
))}
</ul> */}
</div>
);
}
}
}
export default Items;
Here is the response sample in Postman & console.
{
"ITAINUAT69-8982": {
"State": "Not Assigned",
"SubmitDate": "2020-09-11T04:39:51Z",
}
Thanks Everyone.
that's because in the first render getdetails is empty. you can fix this with optional chain operator:
Object.keys(getdetails)?.[0]?.State
or
getdetails?.[itemID]?.State