React / GraphQL Course - Build a social media app (MERNG Stack)
video description
Date: 2022-03-14
Related videos
Comments and reviews: 10
Gabriel
Hello. This tutorial is awesome. I just wanna add, in the Menu, you can use -useEffect- from react and useLocation from 'react-router-dom' to set the ActiveItem.
import React, - useState, useEffect - from 'react'-
import - Menu - from 'semantic-ui-react'-
import - Link, useLocation - from 'react-router-dom'
export default function Header() --
let location = useLocation();-
const [activeItem, setActiveItem] = useState('')-
useEffect(() =>--
const - pathname - = location;-
const path = pathname === '/' ? 'home' : pathname.substr(1)-
setActiveItem(path)-
-, [location])
I haven't completed yet, so I don't know if he fixed.
but when you register and do history.push(-/-), the activeItem on menu doesn't change, so the active tab doesn't change.
reply
Hello. This tutorial is awesome. I just wanna add, in the Menu, you can use -useEffect- from react and useLocation from 'react-router-dom' to set the ActiveItem.
import React, - useState, useEffect - from 'react'-
import - Menu - from 'semantic-ui-react'-
import - Link, useLocation - from 'react-router-dom'
export default function Header() --
let location = useLocation();-
const [activeItem, setActiveItem] = useState('')-
useEffect(() =>--
const - pathname - = location;-
const path = pathname === '/' ? 'home' : pathname.substr(1)-
setActiveItem(path)-
-, [location])
I haven't completed yet, so I don't know if he fixed.
but when you register and do history.push(-/-), the activeItem on menu doesn't change, so the active tab doesn't change.
reply
Animated
By 28 minutes I was getting the error: throw new Error(-called start() with surprising state $-this.state.phase--);
To fix it, I had await the server listen(). The code ended uplooking like this:
async function startApolloServer(typeDefs, resolvers) -
const server = new ApolloServer(- typeDefs, resolvers -);
const - url - = await server.listen(- port: 5000 -);
console.log(-Server ready at $-url--);
-
mongoose
.connect(MONGODB)
.then(() => -
console.log(-Connected to MongoDB-);
startApolloServer(typeDefs, resolvers);
-)
.then(() => -
console.error(-Error while connecting to MongoDB-);
-);
reply
By 28 minutes I was getting the error: throw new Error(-called start() with surprising state $-this.state.phase--);
To fix it, I had await the server listen(). The code ended uplooking like this:
async function startApolloServer(typeDefs, resolvers) -
const server = new ApolloServer(- typeDefs, resolvers -);
const - url - = await server.listen(- port: 5000 -);
console.log(-Server ready at $-url--);
-
mongoose
.connect(MONGODB)
.then(() => -
console.log(-Connected to MongoDB-);
startApolloServer(typeDefs, resolvers);
-)
.then(() => -
console.error(-Error while connecting to MongoDB-);
-);
reply
Kichul
If you ever have a problem where writeQuery updates the cache but does not update the UI, try the following in your PostForm.js
update(cache, result) --
const data = cache.readQuery(--
query: FETCH_POSTS_QUERY,-
-);-
console.log(-in PostForm $-data--);-
cache.writeQuery(--
query: FETCH_POSTS_QUERY,-
data: --
getPosts: [result.data.createPost, ...data.getPosts],-
-,-
-);-
values.body = --;-
-,
reply
If you ever have a problem where writeQuery updates the cache but does not update the UI, try the following in your PostForm.js
update(cache, result) --
const data = cache.readQuery(--
query: FETCH_POSTS_QUERY,-
-);-
console.log(-in PostForm $-data--);-
cache.writeQuery(--
query: FETCH_POSTS_QUERY,-
data: --
getPosts: [result.data.createPost, ...data.getPosts],-
-,-
-);-
values.body = --;-
-,
reply
Saurabh
It is really nice tutorial. But what else is we already have an existing project which is developed using the class components.? So, how to use GraphQL hooks in our class based component.? I wanted to execute query manually using useLazyQuery hooks in our class based component. I am sure it can be accomplished using the Render props / HOC, but not sure how to do that.?
Can you please help me on this. Thanks
reply
It is really nice tutorial. But what else is we already have an existing project which is developed using the class components.? So, how to use GraphQL hooks in our class based component.? I wanted to execute query manually using useLazyQuery hooks in our class based component. I am sure it can be accomplished using the Render props / HOC, but not sure how to do that.?
Can you please help me on this. Thanks
reply
Tariq
hello guys i have this problem in displaying posats at 2:54:11
./src/pages/Home.js-
Module not found: You attempted to import ../../../graphql/resolvers/posts which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
is there anyone has the same problem and he solved it?
reply
hello guys i have this problem in displaying posats at 2:54:11
./src/pages/Home.js-
Module not found: You attempted to import ../../../graphql/resolvers/posts which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
is there anyone has the same problem and he solved it?
reply
Moin
One question why new created post was being added into the post list even after creation of new post we haven't added into the posts list manually and we also not call get posts query after new post created even in likes scenario as well we were facing the same behavior plz clarify this thanks in advance
reply
One question why new created post was being added into the post list even after creation of new post we haven't added into the posts list manually and we also not call get posts query after new post created even in likes scenario as well we were facing the same behavior plz clarify this thanks in advance
reply
Patrizio
Amazing tutorial, probably the best about GraphQL. I was very interested in the auth part and I'm super happy with what I learned. One thing I would suggest; in the registration flow, I would add a check if the email already exists; not just the username. It would make the app more solid I guess.
reply
Amazing tutorial, probably the best about GraphQL. I was very interested in the auth part and I'm super happy with what I learned. One thing I would suggest; in the registration flow, I would add a check if the email already exists; not just the username. It would make the app more solid I guess.
reply
Bennet
at around 4:00:00 I'm getting an error in my code -- -Unhandled Rejection (Error): Response not successful: Received status code 400-... for the life of me, I can't figure this out. Any ideas? Everything seems to work ok on the server side in the apollo-graphql sandbox; I can make a post just fine.
reply
at around 4:00:00 I'm getting an error in my code -- -Unhandled Rejection (Error): Response not successful: Received status code 400-... for the life of me, I can't figure this out. Any ideas? Everything seems to work ok on the server side in the apollo-graphql sandbox; I can make a post just fine.
reply
Daljeet
Hello there can you please explain the difference between Apolllo server and Express server.
is these both are the same thing or not
syntax wise I can say it is different but in another hand I do not have any idea about.
Thanks for this wonderful tutorial once again :) (y)
reply
Hello there can you please explain the difference between Apolllo server and Express server.
is these both are the same thing or not
syntax wise I can say it is different but in another hand I do not have any idea about.
Thanks for this wonderful tutorial once again :) (y)
reply
Cristhian
Actually to export the models you should do like this:
module.exports = mongoose.model(-Post-, postSchema);
Maybe I'ts some update in the syntax of the graphql since the video was created.
This way when you use your find() function will work well!
reply
Actually to export the models you should do like this:
module.exports = mongoose.model(-Post-, postSchema);
Maybe I'ts some update in the syntax of the graphql since the video was created.
This way when you use your find() function will work well!
reply
Add a review, comment
Other channel videos
