https://www.prisma.io/ logo
Join Slack
Powered by
Hi, I'm Manish. I'm building a content-based soci...
# orm-help
m
Hi, I'm Manish. I'm building a content-based social network site. Can you help me select the right stack for my backend? Frontend: I'm using Nuxt/Vue as I have experience with it. Backend: I've mostly build backends with Node/Express REST API and jwt token based authentication. I believe my backend will benefit from Graphql and want to use it. So, here is what I have in mind for the backend: - Node.js - Prisma - I've used sequelize before and am convinced about using prisma in this project. - GraphQL - Not sure which libraries to use. Need help - Authentication - Not sure what to use. But I do want the users to be managed in the same postgresql database. Need help with selecting approach/libraries - Anything else that you can recommend. Database: postgresql Any help with the backend stack is really appreciated.
r
I’m not aware of Nuxt, but in case of GraphQL, you can use Nexus for creating a code-first GraphQL schema. For authentication, you can use a simple JWT-based auth but I would suggest finding something like this for Nuxt as it has direct Prisma support.
m
Ok, I can use Nexus for GraphQL schema. What http server would you suggest to go with it?
d
Nexus - Code first approach, primarily built by Prisma team, plugin for Prisma currently being rewritten TypeGraphQL - has plugin for Prisma NestJS - GraphQL plugin Apollo Server - More “vanilla” GraphQL server, schema first
r
Apollo goes well with Nexus
m
Thanks Ryan, Apollo would be an alternative to Express?
d
yes
plus one +1 1
m
Thank you.
d
m
So, NodeJS Apollo Prisma Nexus Postgresql
d
in Nuxt you may be able to bundle a graphql server into an api endpoint
using apollo-server-micro
so you can have a monolith
m
I can use Nuxt Auth.
in Nuxt you may be able to bundle a graphql server into an api endpoint
Can you explain this?
d
yeah, finding a blogpost for nextjs
it should operate in the same way
m
okay, this is Next. This guide can be a reference for Nuxt in terms of approach?
d
Im not familiar with nuxt but a quick search seems like you can do this
you basically create an api endpoint for a route in your app
m
you basically create an api endpoint for a route in your app
To fetch the token?
d
and you export the handler for the server there
m
Irrespective of what front-end I'm using, I can keep the frontend and backend completely separate. The frontend can request a jwt auth token from the backend and use that token for authenticating the other graphql api requests. Am I describing it correctly?
d
yes
you can do that with this
m
Ok, thank you.
so you can have a monolith
Just trying to understand why you said this? 🙂
d
my experience is with nextjs, not nuxt. I assume that, like nextjs, nuxt can hold api points that you can use within the app.
if so, you can use a monolith and build an apollo-server-micro that would hold your entire graphql server
m
Yes, you're right. Nuxt can have a server within it with api endpoints. So, you're saying that included server can itself become the graphql server?
d
yeah, since graphql is a single endpoint, you can hold it on an api endpoint for your queries
that blog post shows how to do it with nextjs, it will be similar for nuxt
m
Ok, I think I'm beginning to understand it. Thank you!
d
no worries
m
I'm just thinking if it will make sense to use next instead of nuxt. I am familiar with React.
d
up to you, I dont think there will be a large difference
m
Ok, got it. Thanks!
Sorry again - so, apollo-server-micro will be used to create a separate app with graphql endpoint, which will then be used within Nuxt. Am I right here?
d
yeah
👍 1
so you arent hosting a separate server but will be pointing that nuxt endpoint at the server code you will create
m
I got it! I'll try to implement. Will ask you if I get stuck somewhere. Thank you.
d
no problem
m
@Dominic Hadfield I went through the docs and decided to give NextJs a try. It’s wonderful. I’ve implemented with NextJS, next-auth, Prisma, and Postgresql. It’s working great including the authentication. Since the api is implemented within the nextjs app, I’m wondering how to implement graphql here?
d
So, nextjs can server side render the pages but then hand off for client side routing. Using getServerSideProps, you can get the initial data and then the client side can take over after the initial server side rendering. React query has a good way of handling this. If you want the entire app to be server side rendered then you can get rid of the API and not use graphql at all, it's up to you
m
Ok, if I use graphql, then 1) will I still have to use something like apollo, and 2) how will I authenticate the graphql endpoint?
d
Unsure in next auth, they should have documentation on this. You can use anything to make the requests on the front-end, Apollo, fetch, react query, axios, urql
m
Ok, I’ll try. Thank you 🙂
Do you think it’s a good idea to use redux in a nextjs app?
d
Completely up to you, they have an example for setting it up to bind the store to the window so it reuses the store across pages
m
Ok, thanks. Given that it’s a content-based social network, with people adding content, liking and commenting, do you think it will be helpful?
d
You could handle this with a data store like Apollo, urql or react query since this data is all from your api
m
The closest example is the dev.to site
That’s what I was thinking. It seems like redux is not really necessary in this case, but I’m not so sure, and I don’t want to be reworking later.
From the descriptions, I like React Query.
Have you seen any example of nextjs with React Query, preferably with Prisma.
d
Not to hand, the way it should work is you can query the data in getServerSideProps and pass it into the component. In the react query useQuery hook, pass it into the initialData key
m
Ok, thank you. I’ll read more and try to implement.
@Dominic Hadfield Sorry to be bothering you again. My NextJS app is working fine and also fetching data using Prisma client. However, as soon as I use useQuery from React Query, I get the error that “Prisma Client is unable to run in the browser”. https://gist.github.com/msahajwani/13aa78e8ae771b36618591ec8a5d39ba The above is my file. The line 32 referring to useQuery is commented.
I don’t know why this is happening.
d
getPosts can be called on the server side but if you then wish to request from the client, you need to call an api endpoint that can create that connection for you. That query function should be a fetch/axios/graphql-request call to an api endpoint on the server
if you have made a graphql endpoint at 
pages/api/graphql
for example, you can call 
fetch('/api/graphql').then(res => res.json)
etc
m
Oh, I get it. Let me try it. Thank you.
So, to try it, I created an endpoint: http://localhost:3000/api/getposts which returns data as follows:
Copy code
[{"id":1,"title":"First Post","content":"This is the first post.","published":true,"authorId":1,"author":{"name":"Manish"}},{"id":3,"title":"My Second Post","content":"This is my second post. Enjoy!","published":true,"authorId":2,"author":{"name":"Manish S"}}]
The code looks like this: 
import prisma from '../../lib/prisma'
export default async function handle(req, res) {
const result =  await prisma.post.findMany({
where: { published: true },
include: {
author: {
select: { name: true },
},
},
})
res.json(result)
}
The above part looks fine.
In my getStatisProps, I have this: 
export const getStaticProps: GetStaticProps = async () => {
const feed = await fetch('<http://localhost:3000/api/getposts>')
return { props: { feed } }
}
Seems like I’m making some very stupid mistake.
I get this error:
Error: Error serializing 
.feed
returned from 
getStaticProps
in “/”. Reason: 
object
(“[object Response]“) cannot be serialized as JSON. Please only return JSON serializable data types.
d
feed should be serialised by 
feed.json()
Copy code
fetch('<http://example.com/movies.json>')
  .then(response => response.json())
  .then(data => console.log(data));
m
Ok, I changed it as follows: 
export const getStaticProps: GetStaticProps = async () => {
const response = await fetch('<http://localhost:3000/api/getposts>')
const feed = await response.json();
return { props: { feed } }
}
And it’s working great now. Thank you so much!
d
no problem
the juggling of ssr and csr is the tricky bit of next, once you get used to it it becomes easier
m
Yes, I’m just setting up the building blocks before actually setting up the real application. Once React Query is working fine, next task is to setup graphql, and then protecting the routes. That will complete the puzzle.
r
@Manish You might find using Blitz in this case as it’s much easier to setup and based on Next.js
m
Ok, I’ll check this.
I feel I’m close to my desired setup with Next.
Ok, everything working fine on the page with React Query.
I’ll use nexus for graphql.
Hi @Dominic Hadfield I’m stuck again. I used Nexus for the graphql schema and apollo-server-micro for the graphql server. A tutorial I followed says that it will use Urql Graphql client in the front-end. Why do I need this? Can’t I just use fetch() for it? Or something else?
d
you dont need to use urql, its just a lib for handling and storing the requests similar to apollo client, relay, react query. You can just use fetch but it may be easier to use one of these specced out clients to manage your data
m
Ok, thank you. It’s all making sense now.
Open in Slack
PreviousNext
Powered by