https://supabase-graphql-example.vercel.app/_next/static/chunks/pages/about-d2b77dd686b17a5d.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[521],{8975:function(e,t,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/about",function(){return r(4056)}])},4212:function(e,t,r){"use strict";r.d(t,{W:function(){return n}});var a=r(4246);r(7378);function n(e){return(0,a.jsx)("main",{className:"px-0 py-2",children:e.children})}},4056:function(e,t,r){"use strict";r.r(t),r.d(t,{default:function(){return v}});var a=r(4246),n=r(7378),s=r(8038),o=r.n(s),i=r(9894),c=r.n(i);var d=n.forwardRef((function(e,t){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2,stroke:"currentColor","aria-hidden":"true",ref:t},e),n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"}))}));var l=n.forwardRef((function(e,t){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2,stroke:"currentColor","aria-hidden":"true",ref:t},e),n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"}))}));var h=n.forwardRef((function(e,t){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2,stroke:"currentColor","aria-hidden":"true",ref:t},e),n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"}),n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 12a3 3 0 11-6 0 3 3 0 016 0z"}))}));var p=n.forwardRef((function(e,t){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2,stroke:"currentColor","aria-hidden":"true",ref:t},e),n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M13 10V3L4 14h7v7l9-11h-7z"}))}));var u=n.forwardRef((function(e,t){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2,stroke:"currentColor","aria-hidden":"true",ref:t},e),n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"}))}));var m=n.forwardRef((function(e,t){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2,stroke:"currentColor","aria-hidden":"true",ref:t},e),n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"}))}));var g=n.forwardRef((function(e,t){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2,stroke:"currentColor","aria-hidden":"true",ref:t},e),n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"}))}));var w=n.forwardRef((function(e,t){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2,stroke:"currentColor","aria-hidden":"true",ref:t},e),n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"}))}));var f=n.forwardRef((function(e,t){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2,stroke:"currentColor","aria-hidden":"true",ref:t},e),n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"}))})),x=r(4212),v=function(){var e=[{name:"PG GraphQL",description:"Adds GraphQL support to your PostgreSQL database.",icon:d,href:"https://supabase.github.io/pg_graphql/"},{name:"GraphQL Code Generator",description:"Generate code from your GraphQL schema and operations with a simple CLI.",icon:l,href:"https://www.graphql-code-generator.com"}

1,{name:"GraphQL Config",description:"One configuration for development environment with your GraphQL Schema.",icon:h,href:"https://www.graphql-config.com"},{name:"Supabase",description:"Supabase has all the backend services you need to build a product with GraphQL.",icon:p,href:"https://www.supabase.com"},{name:"Supabase Auth",description:"Supabase Auth provides user management with row level security.",icon:u,href:"https://supabase.com/auth"},{name:"Supabase UI",description:"An open-source UI component library inspired by Tailwind and AntDesign.",icon:m,href:"https://ui.supabase.io"},{name:"GraphiQL",description:"GraphiQL is an in-browser IDE for writing, validating, and testing GraphQL queries.",icon:g,href:"https://www.graphql-yoga.com/docs/features/graphiql"},{name:"urql",description:"urql is a highly customizable and versatile GraphQL client.",icon:w,href:"https://formidable.com/open-source/urql/"},{name:"Tailwind CSS",description:"A utility-first CSS framework to rapidly build modern websites.",icon:f,href:"https://tailwindcss.com"}];return(0,a.jsxs)(x.W,{children:[(0,a.jsxs)(o(),{children:[(0,a.jsx)("title",{children:"supanews | About"}),(0,a.jsx)("meta",{name:"description",content:"Everything you need to develop a GraphQL app."}),(0,a.jsx)("link",{rel:"icon",href:"/favicon.ico"})]}),(0,a.jsxs)("div",{className:"relative bg-white py-4 sm:py-8 lg:py-12",children:[(0,a.jsxs)("div",{className:"mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl",children:[(0,a.jsx)("h2",{className:"text-base font-semibold tracking-wider text-green-600 uppercase",children:"GraphQL + Postgres + Tooling"}),(0,a.jsx)("p",{className:"mt-2 text-3xl font-extrabold text-gray-900 tracking-tight sm:text-4xl",children:"Everything you need to develop a GraphQL app"}),(0,a.jsxs)("p",{className:"mt-5 max-w-prose mx-auto text-xl text-gray-500",children:["Build your next GraphQL powered application like this one ... faster and easier with open source tools from"," ",(0,a.jsx)("a",{className:"text-gray-800",href:"https://www.supabase.com",children:"Supabase"}),","," ",(0,a.jsx)("a",{className:"text-gray-800",href:"https://www.the-guild.dev",children:"The Guild"})," ","and more."]}),(0,a.jsx)("div",{className:"mt-12",children:(0,a.jsx)("div",{className:"grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3",children:e.map((function(e){return(0,a.jsx)("div",{className:"pt-6",children:(0,a.jsx)("div",{className:"flow-root bg-gray-50 rounded-lg px-6 pb-8",children:(0,a.jsx)(c(),{href:e.href,children:(0,a.jsx)("a",{children:(0,a.jsxs)("div",{className:"-mt-6",children:[(0,a.jsx)("div",{children:(0,a.jsx)("span",{className:"inline-flex items-center justify-center p-3 bg-gradient-to-r from-teal-500 to-green-600 rounded-md shadow-lg",children:(0,a.jsx)(e.icon,{className:"h-6 w-6 text-white","aria-hidden":"true"})})}),(0,a.jsx)("h3",{className:"mt-8 text-lg font-medium text-gray-900 tracking-tight",children:e.name}),(0,a.jsx)("p",{className:"mt-5 text-base text-gray-500",children:e.description})]})})})})},e.name)}))})})]}),(0,a.jsx)("div",{className:"bg-white",children:(0,a.jsxs)("div",{className:"max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8",children:[(0,a.jsx)("h2",{className:"text-3xl font-extrabold text-gray-900 text-center",children:"Technologies Used"}),(0,a.jsx)("div",{className:"mt-12",children:(0,a.jsx)("dl",{className:"space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-12 lg:grid-cols-3",children:[{id:1,question:"GraphQL Query and Mutation Operations",answer:"The data on this page is fetched from the GraphQL layer auto-generated via pg_graphql."},{id:2,question:"Pagination",answer:"pg_graphql generates standardized pagination types and fields as defined by the GraphQL Cursor Connections Specification."},{id:3,question:"GraphQL Code Generation",answer:"GraphQL Code Generator introspects your GraphQL schema and operations and generates the types for full backend to frontend type-safety."},{id:4,question:"GraphQL Fragments",answer:"Components use GraphQL fragments to share logic between multiple queries and mutations."},{id:5,question:"pg_graphql Postgres Extension",answer:"pg_graphql generates a GraphQL API based on the Postgres schema."},{id:6,question:"Total Counts",answer:"Use pg_graphql's totalCount comment-based GraphQL Directive to count of the rows that match the query's filters."},{id:7,question:"Schema Inflection",answer:"Use pg_graphql's inflect_names comment-based GraphQL Directive to convert from snake_case to PascalCase for type names, and snake_case to camelCase for field names to match Javascript conventions when generating your GraphQL schema."},{id:8,question:"Supabase Postgres",answer:"Every Supabase project is a dedicated PostgreSQL database, trusted by millions of developers. It provide some of the most common extensions with a one-click install."},{id:9,question:"Supabase Auth",answer:"Authorization cannot get any easier. Every Supabase project comes with a complete User Management system that works without any additional tools."},{id:10,question:"Postgres RLS",answer:"Row level security on the Postgres layer ensures that viewers can only access what they are allowed to access and can only create records when authenticated."}

1,{id:11,question:"Postgres Functions",answer:"Built-in support for SQL functions. These functions live inside your database, and they can be used with the Supabase API or invoked by a Postgres Trigger."},{id:12,question:"Postgres Triggers",answer:"Execute any SQL code after inserting, updating, or deleting data. We recalculate the feed scores by invoking a function each time someone votes (or change their vote)."}].map((function(e){return(0,a.jsxs)("div",{children:[(0,a.jsx)("dt",{className:"text-lg leading-6 font-medium text-gray-900",children:e.question}),(0,a.jsx)("dd",{className:"mt-2 text-base text-gray-500",children:e.answer})]},e.id)}))})})]})})]})]})}},8038:function(e,t,r){e.exports=r(555)}},function(e){e.O(0,[774,888,179],(function(){return t=8975,e(e.s=t);var t}));var t=e.O();_N_E=t}]);