Next Js GraphQL: complete toolchain with Apollo, Typescript and Strapi

✳️ Next Js full TS setup with GraphQL backend integration using Apollo ✳️ #next-js #graphql #apollo #typescript #strapi
In this tutorial we'll fully setup our Next Js frontend for the best GraphQL developer experience. Here's what we'll use:
- Next Js with Typescript
- Strapi as a quick GraphQL backend
- Apollo Client to Connect to it
- GraphQL Codegen for automatic GraphQL-to-TS code generation (crucial!)

🔗 Links 🔗

😀 Follow us 😀
✔️ Subscribe to this channel and activate the notification bell

🕒 Timestamps (chapters) 🕒
0:00 - Introduction & Content summary
1:25 - Bootstrap Strapi GraphQL API
2:55 - Create Next Js Typescript application
3:29 - Create some API content
4:36 - First GraphQL query
5:48 - Apollo Client in Next Js
11:49 - GraphQL Code Generator
20:29 - Fetch data and display in Next Js (Apollo React hook)
28:00 - Using the GraphQL Codegen hook
28:56 - Running GraphQL Codegen in watch mode
29:51 - Conclusion and what's next

[simonseeberger]

This is such a great tutorial, thanks a lot!

[mandihaase]

Thank you so much! Very helpful content. I did have to put the video in full screen to see the code, but other than that everything went smoothly~

[pratikbankar]

Great I'm excited to watch this video sequel

[marcelafelixfortis]

Awesome, would love to see your approaches for authentication, deployment and hosting with the Nextjs Typescript Strapi combo

[CHAPI]

Amazing video very well explained, this is a great stack and toolchain. Two questions:

1. Do you have an example of making queries outside react components (specifically in the server side methods for SSR in next.js where you can't use hooks)? I'm having issues with the types not matching the structure of the resulting data
2. Do you know of any methods or techniques for dealing with the deeply nested data that this stack produces? For example at 27:50 line 35 is a clear example, 5 levels of nesting simply to get an attribute of a post

[andrewnleon]

I tried using swr to call my strapi api and I always get map is not a function or use an array instead, then tried useEffect to populate the json from strapi and no luck. Your method I am approaching today with graphql and apolloclient. If you could show us how to use nexts hooks such as that would be awesome.

[kevyyar]

Will this have the complete CRUD operations like Delete, Update and Create other than just Read the data from Strapi? That would be amazing if you could show us how to do that either with Graphql and/or REST API

[nunitoism]

Hi ! Thanks for this helpful tutorial. I am still new to typescript, nextjs and graphql so apologies if my question does'nt make much sense. But, shouldn't we integrate the API query to a getStaticProps function or so ? Isn't this the way to do queries with Nextjs ? I'm not sure how to implement this given your tutorial. Thanks

[levidamian]

Any chance to continue this tutorial showing us mutations, i.e. create / update / delete posts?

[baghz]

Hi, thanks for the detailed tutorial. i had some issue where the response data is undefined. and there is a TS error which said: "Property 'data' does not exist on type". Do you know how to fix this?

[韩韩-fg]

BTW is the nextjs frontend code will be opened on github? If so, plz give us a link, thanks!

[alikarimi]

how can we show all entries not just one like

[韩韩-fg]

Great tuts and the fontsize is too small to read, thanks!

[t]

The font is way too small unfortunately.

[ron-almog]

I guess something has changed in @graphql-codegen/cli. the questions after 'yarn graphql-codegen init' are different, (15:25), it does not ask for plugins anymore, and the plugins array is created empty. when running the script I get the error:
and my strapi app is running of course, and i can test it with that url and getting the 'playground'. any idea?

[mosin]

Awesome, I'm eagerly waiting for next tutorial. But
I'm facing problem while installing strapi . can anyone help to resolve.
Error :
[2022-03-08 11:51:30.731] debug: ⛔️ Server wasn't able to start properly.
Something went wrong installing the "sharp" module

The specified module could not be found.
Backend Practice

[omrishooshan]

Amazing content! but still, the power of next.js is ssr and ssg and these hooks are not usefull for that matter