Full powered GraphQL Backend with Next.js

[dragan-novakovic]

Hi Tim, I started Learning about GraphQL , seems very useful, I would like to see what can be done with it, like reading from MongoDB database, and Socet.io, and other servers all in one, and combined with Next.js, I am not really sure how Next works and if it is possible but seems fun 💯

[evgeniy28]

Hi @Dragan1810, you can see The Fullstack Tutorial for GraphQL https://www.howtographql.com/

[yamalight]

Hi @Dragan1810! Thanks for the suggestion. GraphQL was indeed one of the topic everyone's interested in, so might as well give it a shot :)

[FDiskas]

gatsby have some templates ready for

[yamalight]

The stream for this is happening tomorrow: https://www.twitch.tv/events/Aw7g3CtURyGMl9L9E2XsUQ

[yamalight]

Example code is under: https://github.com/BuildingXwithJS/graphql-next-example

[yamalight]

VoD for the stream is now up on youtube: http://youtu.be/_MTpkAqOZJE

[FDiskas]

What is this for then? https://facebook.github.io/relay/

[FDiskas]

Different implementation https://www.youtube.com/watch?v=I6I2Y-t7tGI

[yamalight]

@FDiskas AFAIK Relay is just another implementation

[MichelDiz]

I made a comment on YT. I suggest as an update on this implementation.

There is a new version from Apollo called "Apollo-boost" and Apollo Client has new ways to query, mutate em subscribe. Below has an example. Can you try this for NextJS?

Cheers.

Apollo-boost makes everything simpler to set up. New Apollo Client makes components easier to understand.

https://codesandbox.io/s/r5qp83z0yq

export const DogWithLikes = ({ url, imageId, isLiked }) => {
  return (
    <Mutation mutation={TOGGLE_LIKED_PHOTO} variables={{ id: imageId }}>
      {toggleLike => (
        <View style={styles.container}>
          <Image source={url} style={styles.image} />
          <Heart
            color={isLiked ? "pink" : "#17cbc4"}
            height={40}
            width={40}
            onPress={toggleLike}
          />
        </View>
      )}
    </Mutation>
  );
};

[yamalight]

@MichelDiz That seems like a pretty neat little abstraction! Don't think it warrants a separate video - it looks like it'll work out of the box with next.js 🤔 Is there anything specific you want to see w.r.t. it?

[MichelDiz]

I picked up an NextJS template similar to yours from the same examples folder of NextJS. They updated some things. It's all working out of the box.

I think just "updating" your example would be cool. After all it's less code.

[yamalight]

Updating it will mess up with people who watch video later on. Might be worth adding that info to readme though 🤔