be6af4f157
### **PR Type** Enhancement ___ ### **Description** - Introduce React Apollo & React Query example projects - Configure GraphQL codegen and generate typed hooks - Implement `AuthProvider` for Nhost session management - Add pages (Home, SignIn, SignUp, Profile) and components ___ ### Diagram Walkthrough ```mermaid flowchart LR CG["Codegen Config"] -- generates --> GT["GraphQL Types & Hooks"] AP["AuthProvider"] -- provides --> APP["App (Router)"] GC["Apollo/Query Client"] -- used by --> APP APP -- routes --> Home["Home Page"] Home -- queries/mutations --> GT ``` <details> <summary><h3> File Walkthrough</h3></summary> <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Dependencies</strong></td><td><details><summary>2 files</summary><table> <tr> <td><strong>graphql.ts</strong><dd><code>Add generated GraphQL types and operations</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-f0ffc6fbc739aa455cf3967c263549e2acf4922dd63d9d2fd33ef9975d958b47">+6994/-0</a></td> </tr> <tr> <td><strong>graphql.ts</strong><dd><code>Add generated GraphQL types and operations</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-08b9f52995757f95a31a6d4d7bafb1f1a473ae338f9d11f343956048d13a0b58">+6944/-0</a></td> </tr> </table></details></td></tr><tr><td><strong>Configuration changes</strong></td><td><details><summary>4 files</summary><table> <tr> <td><strong>apolloClient.ts</strong><dd><code>Setup Apollo client with Nhost auth link</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-f0211d31ead8e27f200356bf615f34eee1e96ec6b068039a36b1506d32c35692">+53/-0</a> </td> </tr> <tr> <td><strong>queryHooks.ts</strong><dd><code>Create React Query authenticated fetcher</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-45c18c55c9756b413c5d4b9a71bd04a53d78706eb9a2a611f2fd0a1ab7ce6b51">+33/-0</a> </td> </tr> <tr> <td><strong>vite.config.ts</strong><dd><code>Add Vite config for React Apollo example</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-146d3d4bcf230a225998f3c68de6ffa9f19e16b85bb5ca882608d76e7b086566">+7/-0</a> </td> </tr> <tr> <td><strong>vite.config.ts</strong><dd><code>Add Vite config for React Query example</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-22a14bf686832a47057d73f552546a1d56a1f34cd34666acf741940feca0605f">+7/-0</a> </td> </tr> </table></details></td></tr><tr><td><strong>Enhancement</strong></td><td><details><summary>14 files</summary><table> <tr> <td><strong>AuthProvider.tsx</strong><dd><code>Implement Nhost AuthProvider for React Apollo</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-71a439d2114fc41855bdb2041134bbc4de64f886f06f3f50ed2fd31cc61c84a5">+175/-0</a> </td> </tr> <tr> <td><strong>AuthProvider.tsx</strong><dd><code>Implement Nhost AuthProvider for React Query</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-34697170eae721899cacb8faca334b60793b405b3f2ee327fecd4d6944338ed1">+175/-0</a> </td> </tr> <tr> <td><strong>Home.tsx</strong><dd><code>Add Home page with Apollo queries</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-407aac78333f6d47a86500b3e0c2311f1967ce50ba1a7ef4f022b8a50c013160">+203/-0</a> </td> </tr> <tr> <td><strong>Home.tsx</strong><dd><code>Add Home page with React Query hooks</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-c91862e4a735090baf145ed64f347a460446a25b8d5061b6b928b88ddb146008">+204/-0</a> </td> </tr> <tr> <td><strong>SignUp.tsx</strong><dd><code>Add SignUp page and form</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-9a841d153068ba2ba45e3b00c3979eca2048037670945ff079bce6645780f447">+127/-0</a> </td> </tr> <tr> <td><strong>SignUp.tsx</strong><dd><code>Add SignUp page and form</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-53b2663ba20acd8379c5dbbb671dd0c1badbb24955c7b9b7d9115843bd9ea859">+127/-0</a> </td> </tr> <tr> <td><strong>SignIn.tsx</strong><dd><code>Add SignIn page and form</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-fd0d7f5b422c5c3ec70fdeb95da10479b90132a571de56307d9b44fc69aaf27b">+120/-0</a> </td> </tr> <tr> <td><strong>SignIn.tsx</strong><dd><code>Add SignIn page and form</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-ec047013e51fbbbc17b641287e763558c5182325be0fe86d44e439eeca6e9ad1">+120/-0</a> </td> </tr> <tr> <td><strong>Profile.tsx</strong><dd><code>Add Profile page display</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-53e4cf70b4b84819e216a602241d5379b9402a2412af122b5a870ec0bc8cd6a1">+66/-0</a> </td> </tr> <tr> <td><strong>Profile.tsx</strong><dd><code>Add Profile page display</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-13fbb13999bb0001387c3d9a5015974ffece9575c1e6240a21157a07090b3374">+66/-0</a> </td> </tr> <tr> <td><strong>Navigation.tsx</strong><dd><code>Add navigation bar component</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-eb031d8883524edeab44c5b665a2429cffb1bac75d8f0dc1dc7bc3c42aa9c068">+85/-0</a> </td> </tr> <tr> <td><strong>Navigation.tsx</strong><dd><code>Add navigation bar component</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-3d34860dbf6645315068dd62f3be52745294be2729e4dc718e40ad0125669204">+85/-0</a> </td> </tr> <tr> <td><strong>ProtectedRoute.tsx</strong><dd><code>Add protected route wrapper</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-55c80a4fab944fa1c3210cce0fd0092776a01046ee9893c88c69d0c5f5f5458b">+26/-0</a> </td> </tr> <tr> <td><strong>ProtectedRoute.tsx</strong><dd><code>Add protected route wrapper</code> </dd></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-bfc4913eb77b8cbe8115f7833bfdf1aad595496f3160dbf43eabf829f0d94f5a">+26/-0</a> </td> </tr> </table></details></td></tr><tr><td><strong>Additional files</strong></td><td><details><summary>39 files</summary><table> <tr> <td><strong>examples_guides_checks.yaml</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-56c96ece925a38bd3e84d3fff001760c68d40744013d2b3458ad445a686a0c36">+94/-0</a> </td> </tr> <tr> <td><strong>project.nix</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-f6086e59795d16f4c73cb0e5f90b986e288deb5f176c80c5c035f1703ff86760">+1/-3</a> </td> </tr> <tr> <td><strong>Makefile</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-85a3083c78e211e9eb36d741342bcbc85a1a0c375060f45c5426b560196de27f">+17/-0</a> </td> </tr> <tr> <td><strong>package.json</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-4095856b4a3f808fcab300063ba57b9e84d2cd2b80e244b69d48d13ddadf161d">+13/-0</a> </td> </tr> <tr> <td><strong>project.nix</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-65c8830b4c3074e59267275284f270f4dfa95ce2722d7634e3e3c77f66f8235e">+105/-0</a> </td> </tr> <tr> <td><strong>README.md</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-b79af2df973af3966472409744a06f7e930008c43216cee8ea91af504bf569fe">+391/-0</a> </td> </tr> <tr> <td><strong>biome.json</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-bee8a9ce71bf1a5641c7bc5aa57f0ca5b4ab5e6a1fc0c08067cb02caa48048a9">+7/-0</a> </td> </tr> <tr> <td><strong>codegen-wrapper.sh</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-3d8141868656cb3c65352257558703f27b1f73b417f8a3223a595d31ffda1b4a">+27/-0</a> </td> </tr> <tr> <td><strong>codegen.ts</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-88f3c353c9bfd474e259a4e6a70b4425032b1d6b3c228046c36333b22bdb027e">+44/-0</a> </td> </tr> <tr> <td><strong>index.html</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-e26ca0f00bc4456ef2ec04d470a864c72252bff2a9d34aa068bd6fcee9bd837c">+13/-0</a> </td> </tr> <tr> <td><strong>package.json</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-219f91ff32e8ae8ff4fb20d06f91c0d4501d50dcaf34a4012aa0829c61eca41b">+36/-0</a> </td> </tr> <tr> <td><strong>schema.graphql</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-1aef57e8c82d9f02e7c40f665ffbc384489beff7b299a8d30f1b2a00ba54676b">+10143/-0</a></td> </tr> <tr> <td><strong>App.tsx</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-3939716d6e04d989c77f1b141c7893b8cad49325d77146df613ea763da566029">+56/-0</a> </td> </tr> <tr> <td><strong>index.css</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-42378718fb21f3858c4d3ced50bff70946a0a63d6f5afabf5d29e01b9d7e58cb">+552/-0</a> </td> </tr> <tr> <td><strong>queries.graphql</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-a72744935ef245ce03e31a475ece30582d3fa9d8295a1338d2fdf3d64f52875a">+28/-0</a> </td> </tr> <tr> <td><strong>main.tsx</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-fe10a290150d971b54595c18a0e3b9486ddd237611225ec4fae333c893403a96">+33/-0</a> </td> </tr> <tr> <td><strong>Home.css</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-34b39976cc1741190f571fe587e77290bfec3f7248b8dab7cfe2ef3832f39ad0">+217/-0</a> </td> </tr> <tr> <td><strong>vite-env.d.ts</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-76ec290ea25ad1dd3d6a40aceb23964e6af759e9d223d0227ea7a9b4c27a4c1a">+11/-0</a> </td> </tr> <tr> <td><strong>tsconfig.json</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-1c4ff207f3f497bf6eb395d765c67c43197a8141faf8e0b78975749d7ef8de7b">+6/-0</a> </td> </tr> <tr> <td><strong>tsconfig.node.json</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-2c47cac1784e69cc8ee9de2b8654939b7699e627e6996135af736d086471cbda">+4/-0</a> </td> </tr> <tr> <td><strong>README.md</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-f8cffe1a6c5ab9062008bdc81cbdbc19ff73c414e852e6cc630288c935cb85c5">+493/-0</a> </td> </tr> <tr> <td><strong>biome.json</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-f3c8d8d56e583f7496332f58d85b8f2fc179364af6d7b6db2050cf8f3019449d">+7/-0</a> </td> </tr> <tr> <td><strong>codegen-wrapper.sh</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-697fec800dc8ea79d58ac3650f21d252340f04c760df18c060c24523a7324967">+31/-0</a> </td> </tr> <tr> <td><strong>codegen.ts</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-9b2b4b1be5005479ea56b7dbb26f8f34e9b39ab005c4df5e5547caef4bb8176e">+52/-0</a> </td> </tr> <tr> <td><strong>index.html</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-6a4d60e607c923818133e58b28b06f9b749a492a500a6b2899e1f2fd991ad03b">+13/-0</a> </td> </tr> <tr> <td><strong>package.json</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-e80d8d01acf5048bc7c1767cf248b07e67df6a13914ac02d43c8b180b0178ddc">+35/-0</a> </td> </tr> <tr> <td><strong>schema.graphql</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-938b6a319b1d5f5234f3e80b49c3d9c429a45569fb777ef9310bdbdeb3f485e2">+10143/-0</a></td> </tr> <tr> <td><strong>App.tsx</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-9a06f558adc00bb736ae330d10f276dd360d3b2e08814d424392470d6b19af3b">+56/-0</a> </td> </tr> <tr> <td><strong>index.css</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-8fe80a812b88da1a00debcd607d5a7300a01558103403d6beba1c8a514d1cae0">+552/-0</a> </td> </tr> <tr> <td><strong>QueryProvider.tsx</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-5e3488d3b7deca24d0d26f4af88d201e7678662e6531f4e4cb511f99d32854d5">+27/-0</a> </td> </tr> <tr> <td><strong>queries.graphql</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-6506f25586ed4d14db727ca7ee5be4e299c29dbbfcdbcbc4f81e49a4ae9b5fb5">+28/-0</a> </td> </tr> <tr> <td><strong>main.tsx</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-2d90aa9771205fab3d46a5d28686eae47e929a9ec6070dc3d564d37d6324768f">+22/-0</a> </td> </tr> <tr> <td><strong>Home.css</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-ef3665d0c09e727cc06d1d429d983c3767f8b65add4bdbe5b095d3816ebbce1d">+217/-0</a> </td> </tr> <tr> <td><strong>vite-env.d.ts</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-c931c9d2529208b5808e22f0a18c44b7cff5e88d1592b8f472f46bcdeda844b5">+11/-0</a> </td> </tr> <tr> <td><strong>tsconfig.json</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-097ce507ecd096e978eb5013155ceb912fe10b0b6de8ee4a0f13ff08565e1cae">+6/-0</a> </td> </tr> <tr> <td><strong>tsconfig.node.json</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-12b373ca0bdd9a2bc826e660ccdccc9573bd0ef54d592f2ebce0473e9568dde8">+4/-0</a> </td> </tr> <tr> <td><strong>flake.nix</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-206b9ce276ab5971a2489d75eb1b12999d4bf3843b7988cbe8d687cfde61dea0">+7/-40</a> </td> </tr> <tr> <td><strong>js.nix</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-bdae1ae0f0031ce2c2e0356df4460e40363922c9658b25c773ebfe29fe052cf9">+4/-1</a> </td> </tr> <tr> <td><strong>pnpm-workspace.yaml</strong></td> <td><a href="https://github.com/nhost/nhost/pull/3460/files#diff-18ae0a0fab29a7db7aded913fd05f30a2c8f6c104fadae86c9d217091709794c">+1/-0</a> </td> </tr> </table></details></td></tr></tr></tbody></table> </details> ___
Nhost
Quickstart
•
Website
•
Docs
•
Blog
•
Twitter
•
Discord
•
Ask Nhost Guru (third party, unofficial)
Nhost is an open source Firebase alternative with GraphQL, built with the following things in mind:
- Open Source
- GraphQL
- SQL
- Great Developer Experience
Nhost consists of open source software:
- Database: PostgreSQL
- Instant GraphQL API: Hasura
- Authentication: Hasura Auth
- Storage: Hasura Storage
- Serverless Functions: Node.js (JavaScript and TypeScript)
- Nhost CLI for local development
Architecture of Nhost
Visit https://docs.nhost.io for the complete documentation.
Get Started
Option 1: Nhost Hosted Platform
- Sign in to Nhost.
- Create Nhost app.
- Done.
Option 2: Self-hosting
Since Nhost is 100% open source, you can self-host the whole Nhost stack. Check out the example docker-compose file to self-host Nhost.
Sign In and Make a GraphQL Request
Install the @nhost/nhost-js package and start building your app:
import { NhostClient } from '@nhost/nhost-js'
const nhost = new NhostClient({
subdomain: '<your-subdomain>',
region: '<your-region>'
})
await nhost.auth.signIn({ email: 'user@domain.com', password: 'userPassword' })
await nhost.graphql.request(`{
users {
id
displayName
email
}
}`)
Frontend Agnostic
Nhost is frontend agnostic, which means Nhost works with all frontend frameworks.
Resources
- Start developing locally with the Nhost CLI
Nhost Clients
Integrations
Applications
Community ❤️
First and foremost: Star and watch this repository to stay up-to-date.
Also, follow Nhost on GitHub Discussions, our Blog, and on Twitter. You can chat with the team and other members on Discord and follow our tutorials and other video material at YouTube.
Nhost is Open Source
This repository, and most of our other open source projects, are licensed under the MIT license.
How to contribute
Here are some ways of contributing to making Nhost better:
- Try out Nhost, and think of ways to make the service better. Let us know here on GitHub.
- Join our Discord and connect with other members to share and learn from.
- Send a pull request to any of our open source repositories on Github. Check our contribution guide and our developers guide for more details about how to contribute. We're looking forward to your contribution!
Contributors