konnosDashboard
Introduction.tsx150 lines · main
1import { useParams } from 'common'
2
3import { DocSection } from '../../DocSection'
4import PublicSchemaNotEnabledAlert from '../../PublicSchemaNotEnabledAlert'
5import CodeSnippet from '@/components/interfaces/Docs/CodeSnippet'
6import { GeneratingTypes } from '@/components/interfaces/Docs/GeneratingTypes'
7import { InlineLink } from '@/components/ui/InlineLink'
8import { useProjectPostgrestConfigQuery } from '@/data/config/project-postgrest-config-query'
9
10interface IntroductionProps {
11 selectedLang: 'bash' | 'js'
12}
13
14const Introduction = ({ selectedLang }: IntroductionProps) => {
15 const { ref: projectRef } = useParams()
16
17 const { data: config, isSuccess } = useProjectPostgrestConfigQuery({ projectRef })
18
19 const isPublicSchemaEnabled = config?.db_schema
20 .split(',')
21 .map((name) => name.trim())
22 .includes('public')
23
24 return (
25 <div className="flex flex-col flex-1">
26 <DocSection
27 title="Introduction"
28 content={
29 <p>
30 All views and tables in the <code>public</code> schema and accessible by the active
31 database role for a request are available for querying.
32 </p>
33 }
34 snippets={isSuccess && !isPublicSchemaEnabled && <PublicSchemaNotEnabledAlert />}
35 />
36
37 <DocSection
38 title="Non-exposed tables"
39 content={
40 <p>
41 If you don't want to expose tables in your API, simply add them to a different schema
42 (not the <code>public</code> schema).
43 </p>
44 }
45 />
46
47 <GeneratingTypes selectedLang={selectedLang} />
48
49 <DocSection
50 title={
51 <>
52 GraphQL <span className="lowercase font-normal">vs</span> Briven
53 </>
54 }
55 content={
56 <>
57 <p>
58 If you have a GraphQL background, you might be wondering if you can fetch your data in
59 a single round-trip. The answer is yes!
60 </p>
61 <p>
62 The syntax is very similar. This example shows how you might achieve the same thing
63 with Apollo GraphQL and Briven.
64 </p>
65 <h4 className="text-foreground-light mt-8 font-medium">Still want GraphQL?</h4>
66 <p>
67 If you still want to use GraphQL, you can. Briven provides you with a full Postgres
68 database, so as long as your middleware can connect to the database then you can still
69 use the tools you love. You can find the database connection details{' '}
70 <InlineLink href={`/project/${projectRef}/database/settings`}>
71 in the settings.
72 </InlineLink>
73 </p>
74 </>
75 }
76 snippets={
77 <>
78 <CodeSnippet selectedLang={selectedLang} snippet={localSnippets.withApollo()} />
79 <CodeSnippet selectedLang={selectedLang} snippet={localSnippets.withBriven()} />
80 </>
81 }
82 />
83 </div>
84 )
85}
86
87const localSnippets = {
88 withApollo: () => ({
89 title: 'With Apollo GraphQL',
90 bash: {
91 language: 'js',
92 code: `
93const { loading, error, data } = useQuery(gql\`
94 query GetDogs {
95 dogs {
96 id
97 breed
98 owner {
99 id
100 name
101 }
102 }
103 }
104\`)`,
105 },
106 js: {
107 language: 'js',
108 code: `
109const { loading, error, data } = useQuery(gql\`
110 query GetDogs {
111 dogs {
112 id
113 breed
114 owner {
115 id
116 name
117 }
118 }
119 }
120\`)`,
121 },
122 }),
123 withBriven: () => ({
124 title: 'With Briven',
125 bash: {
126 language: 'js',
127 code: `
128const { data, error } = await briven
129 .from('dogs')
130 .select(\`
131 id, breed,
132 owner (id, name)
133 \`)
134`,
135 },
136 js: {
137 language: 'js',
138 code: `
139const { data, error } = await briven
140 .from('dogs')
141 .select(\`
142 id, breed,
143 owner (id, name)
144 \`)
145`,
146 },
147 }),
148}
149
150export default Introduction