The data from the Query does load once it loaded but once i reload it the data does not appear... I have console.log the data by using "console.log(data.allPetInformations)" and it does work and getting an array of objects...
import { ALL_PET_INFORMATIONS } from '../../../query';
import { useQuery } from '#apollo/client';
import Session from 'react-session-api';
export function ClientPet(){
const username = Session.get('username');
const { loading, error, data } = useQuery(ALL_PET_INFORMATIONS);
if(loading) return <div>loading...</div>
if(error) return <div>{error.message}</div>
return(
<div>
{data.allPetInformations.filter(pet => pet.client.username===username).map(pet => (
<div key={pet.id}>
{pet.name}
</div>
))}
</div>
)
}
Related
Initial query returns undefined, but all subsequent calls return valid data. If I try to map my response, an error is thrown:
can not read properties of undefined
and the whole app is down. How do i fix this?
import { useQuery } from "#apollo/client";
import { Component } from "react";
import { useState, useEffect } from "react";
import GET_PRODUCTS from '../../server/getProducts';
import './productList.sass';
class ProductList extends Component {
render() {
return (
<RenderProducts />
);
}
}
const RenderProducts = () => {
const { data } = useQuery(GET_PRODUCTS);
console.log(data.products.map(product => console.log(product)));
const products = data.products.map((product) => {
return (
<li className="productList__item">
<img className="productList__item-img" src={product.mainImage.url} alt={product.title} />
<div className="productList__item-descr">
<div className="productList__item-title">{product.title}</div>
<div className="productList__item-price">{product.price} $</div>
</div>
</li>
)
})
return <ul>{products}</ul>
}
export default ProductList;
If I try to map my response, an error is thrown:
and the whole app is down. How do i fix this?
You'll need to render something when the query is in a loading state. You can take advantage of the loading and error properties of useQuery hook. Here's a sample:
const RenderProducts = () => {
const { data, loading, error } = useQuery(GET_PRODUCTS);
if(loading) return <div>loading...</div>
if(error) return <div>cannot render products...something went wrong</div>
// if the query has finished loading products and there's no error,
// You can access data.products
// and write your logic
console.log(data.products.map(product => console.log(product)));
const products = data.products.map((product) => {
return (
<li className="productList__item">
<img className="productList__item-img" src={product.mainImage.url} alt={product.title} />
<div className="productList__item-descr">
<div className="productList__item-title">{product.title}</div>
<div className="productList__item-price">{product.price} $</div>
</div>
</li>
)
})
return <ul>{products}</ul>
}
/index file/ i can't fetch the data from sanity. the slug
and schema
files looks fine.When i click on the product i get the following error : 404 page could not be found. Anyone could please help me :-).
import React from 'react';
import { client } from '../lib/client';
import { Product, FooterBanner, HeroBanner} from '../components';
const Home = ({ products, bannerData}) => {
return (
<>
<HeroBanner heroBanner={bannerData.length && bannerData[0]} />
<div className='products-heading'>
<h1>Best Selling Products</h1>
<p>Speakers of many variations passages</p>
</div>
<div className='products-container'>
{products?.map((product) => <Product key= {product._id} product={product}/>)}
</div>
<FooterBanner footerBanner={bannerData && bannerData[0]} />
</>
)
}
export const getServerSideProps = async () => {
const query = '*[_type == "product"]';
const products = await client.fetch(query);
const bannerQuery = '*[_type == "banner"]';
const bannerData = await client.fetch(bannerQuery);
return {
props: { products, bannerData }
}
}
export default Home;
this Error mostly happens when you have entered your Api endpoint incorrectly .
check that
I am having a bit of a problem using the map function.
In the below code I am fetching NFT data through a rarible api using Axios (Works perfectly fine, I get a promise with the object as a response)
import Link from 'next/link'
import { useWeb3Context } from '../../context'
import { Web3Button } from '../../components'
import axios from 'axios'
import React, { useState } from 'react'
import NFTContainer from '#/components/NFTContainer'
const renderNotConnectedContainer = () => <Web3Button />
const fetchOwnedTokens = async (owner) => {
try {
const result = await axios.get(`https://ethereum-api.rarible.org/v0.1/nft/items/byOwner?owner=${owner}`)
return [result.data.items]
} catch (err) {
console.error(err)
return []
}
}
export const ChooseProductView = () => {
const { address } = useWeb3Context()
if (!address) {
return renderNotConnectedContainer()
} else {
const data = fetchOwnedTokens(address)
console.log(data)
return (
<div className="flex items-center justify-center">
<NFTContainer nfts={data} />
</div>
)
}
}
Then I am trying to pass the response to a container file using props, but I get an error --Unhandled Runtime Error
TypeError: nfts.map is not a function
which I think is because NFTs are not of an array datatype. Any suggestions, please? Have been stuck for a while
import React from 'react'
import NFTCard from './NFTCard'
const NFTContainer = ({ nfts }) => {
return (
<div>
{nfts.map((nft, index) => (
<NFTCard nft={nft} key={index} />
))}
</div>
)
}
export default NFTContainer
You can not use map on object so you should convert it :
<div>
{Object.keys(nfts).map((nft, index) => (
<NFTCard nft={nft} key={index} />
))}
</div>
I'm working with Prisma in Next JS for the first timeand i've been getting this error.
I'm importing data from prisma client in my dynamic page and i'm using simple code here.
Here is my code:
import Head from 'next/head';
import { Container, Div1, Div2, Div3 ,Button , Input ,Label } from '../../components/Header/HeaderStyles';
import {useState} from 'react';
import { PrismaClient } from '#prisma/client'
const prisma = new PrismaClient()
export default function Details({posts}) {
return (
<div>
{posts.map((post) => (
<div key={post.id}>
{post.id} {post.text}
</div>
))}
</div>
)
}
export async function getServerSideProps(context) {
const { id } = context.query
const data = await prisma.contact.findFirst({
where: {
id: Number(id)
}
})
return{
props:{
posts:data,
}}
}
I'm trying to update existing data collection on strapi with a new enter. using strapi and GraphQL in the backhand and react on the front.
import React from 'react'
import { useMutation, gql } from '#apollo/client'
const CREATE_REVEIW = gql`
mutation {
createReveiw(input: { data: {body:“Lorem ipsum dolor sit am”,title: “avitesttesting”, rating: 5} }) {
reveiw {
body
title
rating
} } } `;
export default function AddTodo() {
const [createReveiw, { data, loading, error }] = useMutation(CREATE_REVEIW);}
console.log(data);
if (loading) return 'Submitting...';
if (error) return `Submission error! ${error.message}`;
return (
<div className="review-card">
<div className="rating">{data.reveiw.rating}</div>
<h2>{data.reveiw.title}</h2>
{data.reveiw.categories.map(c => (
<small key={c.id}>{c.name}</small>
))}
<p>{data.reveiw.body}</p>
</div>
)
I am getting an err:
SyntaxError: C:\graphy\graphy2\src\pages\AddTodo.js: 'return' outside of function. data' is not defined loading' is not defined
Because you have } in the end of line:
const [createReveiw, { data, loading, error }] = useMutation(CREATE_REVEIW);}
So just remove it and update like this:
export default function AddTodo() {
const [createReveiw, { data, loading, error }] = useMutation(CREATE_REVEIW);
console.log(data);
if (loading) return "Submitting...";
if (error) return `Submission error! ${error.message}`;
return (
<div className="review-card">
<div className="rating">{data.reveiw.rating}</div>
<h2>{data.reveiw.title}</h2>
{data.reveiw.categories.map((c) => (
<small key={c.id}>{c.name}</small>
))}
<p>{data.reveiw.body}</p>
</div>
);
}