Skip to content

Commit

Permalink
chore(docs): add generated examples to website (#1040)
Browse files Browse the repository at this point in the history
  • Loading branch information
jasonkuhrt authored Aug 23, 2024
1 parent 9747c56 commit eeb59e9
Show file tree
Hide file tree
Showing 48 changed files with 1,002 additions and 114 deletions.
1 change: 1 addition & 0 deletions examples/$helpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { inspect } from 'node:util'
export const publicGraphQLSchemaEndpoints = {
SocialStudies: `https://countries.trevorblades.com/graphql`,
}

export const show = (value: unknown) => {
console.log(inspect(value, { depth: null, colors: true }))
}
3 changes: 2 additions & 1 deletion examples/arguments.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* eslint-disable */
import { SocialStudies } from './$generated-clients/SocialStudies/__.js'
import { show } from './$helpers.js'

const socialStudies = SocialStudies.create()

Expand All @@ -9,4 +10,4 @@ const countries = await socialStudies.query.countries({
continent: { name: true },
})

console.log(countries)
show(countries)
3 changes: 2 additions & 1 deletion examples/config-fetch.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* eslint-disable */
import { SocialStudies } from './$generated-clients/SocialStudies/__.js'
import { show } from './$helpers.js'

const socialStudies = SocialStudies.create()
.use({
Expand All @@ -21,4 +22,4 @@ const countries = await socialStudies.query.countries({
name: true,
})

console.log(countries)
show(countries)
3 changes: 2 additions & 1 deletion examples/config-http-headers.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { SocialStudies } from './$generated-clients/SocialStudies/__.js'
import { show } from './$helpers.js'

const socialStudies = SocialStudies.create({
headers: {
Expand All @@ -8,4 +9,4 @@ const socialStudies = SocialStudies.create({

const continents = await socialStudies.query.continents({ name: true })

console.log(continents)
show(continents)
6 changes: 3 additions & 3 deletions examples/raw-typed.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { TypedQueryDocumentNode } from 'graphql'
import { gql, Graffle } from '../src/entrypoints/graffle/main.js'
import { publicGraphQLSchemaEndpoints } from './$helpers.js'
import { publicGraphQLSchemaEndpoints, show } from './$helpers.js'

const graffle = Graffle.create({
schema: publicGraphQLSchemaEndpoints.SocialStudies,
Expand Down Expand Up @@ -28,7 +28,7 @@ const graffle = Graffle.create({

const result = await graffle.raw({ document, variables: { filter: [`Canada`, `Germany`, `Japan`] } })

console.log(result.data?.countries)
show(result.data?.countries)
}

/*************************************** Variation 2 ***************************************
Expand Down Expand Up @@ -58,5 +58,5 @@ const graffle = Graffle.create({

const result = await graffle.raw({ document, variables: { filter: [`Canada`, `Germany`, `Japan`] } })

console.log(result.data?.countries)
show(result.data?.countries)
}
4 changes: 2 additions & 2 deletions examples/rawString-typed.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Graffle } from '../src/entrypoints/graffle/main.js'
// todo from '../src/entrypoints/graffle/utils.js'
import type { TypedDocumentString } from '../src/layers/0_functions/types.js'
import { publicGraphQLSchemaEndpoints } from './$helpers.js'
import { publicGraphQLSchemaEndpoints, show } from './$helpers.js'

const graffle = Graffle.create({
schema: publicGraphQLSchemaEndpoints.SocialStudies,
Expand Down Expand Up @@ -34,4 +34,4 @@ const result = await graffle.rawString({
variables: { filter: [`Canada`, `Germany`, `Japan`] },
})

console.log(result.data?.countries)
show(result.data?.countries)
4 changes: 2 additions & 2 deletions examples/rawString.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Graffle } from '../src/entrypoints/graffle/main.js'
import { publicGraphQLSchemaEndpoints } from './$helpers.js'
import { publicGraphQLSchemaEndpoints, show } from './$helpers.js'

const graffle = Graffle.create({
schema: publicGraphQLSchemaEndpoints.SocialStudies,
Expand All @@ -17,4 +17,4 @@ const result = await graffle.rawString({
document,
})

console.log(result.data)
show(result.data)
194 changes: 95 additions & 99 deletions website/.vitepress/config.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
import { ModuleKind, ModuleResolutionKind } from 'typescript'
import { defineConfig } from 'vitepress'
import { sidebarExamples } from './configExamples'

// https://vitepress.dev/reference/site-config
export default defineConfig({
Expand Down Expand Up @@ -45,106 +46,101 @@ export default defineConfig({
prev: false,
},
aside: 'left',
// https://vitepress.dev/reference/default-theme-config
// nav: [
// { text: 'Home', link: '/' },
// { text: 'Examples', link: '/markdown-examples' },
// ],
sidebar: [
{
text: 'Overview',
collapsed: false,
items: [
{ text: 'Introduction', link: '/overview/introduction' },
{
text: 'Getting Started',
// link: '/overview/getting-started',
items: [{
text: 'Static Client',
link: '/overview/getting-started-static',
}, {
text:
'Generated Client <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
link: '/overview/getting-started-generated',
}],
},
{
text: 'Generation <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
link: '/overview/generation',
},
],
},
{
text: 'Configuration',
collapsed: false,
items: [
{ text: 'Transports', link: '/configuration/transports' },
{ text: 'Output', link: '/configuration/output' },
{ text: 'Request', link: '/configuration/request' },
{ text: 'Anyware', link: '/configuration/anyware' },
],
},
{
text: 'Methods',
collapsed: false,
items: [
{ text: 'Raw', link: '/methods/raw' },
{ text: 'Or Throw', link: '/methods/or-throw' },
{
text: 'Document <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
link: '/methods/document',
},
{
text: 'Batch <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
link: '/methods/batch',
},
{
text: 'Root Fields <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
link: '/methods/root-fields',
},
],
},
{
text: 'GQL Feature Mapping <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
collapsed: false,
items: [
{ text: 'Arguments', link: '/graphql-feature-mapping/arguments' },
{ text: 'Aliases', link: '/graphql-feature-mapping/aliases' },
{ text: 'Enums', link: '/graphql-feature-mapping/enums' },
{ text: 'Interfaces', link: '/graphql-feature-mapping/interfaces' },
{ text: 'Unions', link: '/graphql-feature-mapping/unions' },
{ text: 'Directives', link: '/graphql-feature-mapping/directives' },
{ text: 'Custom Scalars', link: '/graphql-feature-mapping/custom-scalars' },
{ text: 'Selection Groups', link: '/graphql-feature-mapping/selection-groups' },
],
},
{
text: 'Misc <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
collapsed: false,
items: [
{ text: 'Schema Errors', link: '/misc/schema-errors' },
{ text: 'Select', link: '/misc/select' },
{ text: 'Extension Authoring', link: '/misc/extension-authoring' },
],
},
{
text: 'Extensions',
collapsed: false,
items: [
{ text: 'File Upload', link: '/extensions/file-upload' },
{ text: 'OTEL', link: '/extensions/otel' },
{ text: 'Or Throw', link: '/extensions/or-throw' },
],
},
{
text: 'Examples',
collapsed: false,
items: [
{ text: '.rawString', link: '/examples/rawString' },
{ text: '.rawString Typed', link: '/examples/rawString-typed' },
],
},
nav: [
{ text: 'Guides', link: '/guides/overview/introduction' },
{ text: 'Examples', link: sidebarExamples[0].link ?? '/' },
],
sidebar: {
'/examples/': sidebarExamples,
'/guides/': [
{
text: 'Overview',
collapsed: false,
items: [
{ text: 'Introduction', link: '/guides/overview/introduction' },
{
text: 'Getting Started',
// link: '/overview/getting-started',
items: [{
text: 'Static Client',
link: '/guides/overview/getting-started-static',
}, {
text:
'Generated Client <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
link: '/guides/overview/getting-started-generated',
}],
},
{
text: 'Generation <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
link: '/guides/overview/generation',
},
],
},
{
text: 'Configuration',
collapsed: false,
items: [
{ text: 'Transports', link: '/guides/configuration/transports' },
{ text: 'Output', link: '/guides/configuration/output' },
{ text: 'Request', link: '/guides/configuration/request' },
{ text: 'Anyware', link: '/guides/configuration/anyware' },
],
},
{
text: 'Methods',
collapsed: false,
items: [
{ text: 'Raw', link: '/methods/raw' },
{ text: 'Or Throw', link: '/guides/methods/or-throw' },
{
text: 'Document <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
link: '/guides/methods/document',
},
{
text: 'Batch <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
link: '/guides/methods/batch',
},
{
text: 'Root Fields <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
link: '/guides/methods/root-fields',
},
],
},
{
text:
'GQL Feature Mapping <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
collapsed: false,
items: [
{ text: 'Arguments', link: '/guides/graphql-feature-mapping/arguments' },
{ text: 'Aliases', link: '/guides/graphql-feature-mapping/aliases' },
{ text: 'Enums', link: '/guides/graphql-feature-mapping/enums' },
{ text: 'Interfaces', link: '/guides/graphql-feature-mapping/interfaces' },
{ text: 'Unions', link: '/guides/graphql-feature-mapping/unions' },
{ text: 'Directives', link: '/guides/graphql-feature-mapping/directives' },
{ text: 'Custom Scalars', link: '/guides/graphql-feature-mapping/custom-scalars' },
{ text: 'Selection Groups', link: '/guides/graphql-feature-mapping/selection-groups' },
],
},
{
text: 'Misc <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
collapsed: false,
items: [
{ text: 'Schema Errors', link: '/guides/misc/schema-errors' },
{ text: 'Select', link: '/guides/misc/select' },
{ text: 'Extension Authoring', link: '/guides/misc/extension-authoring' },
],
},
{
text: 'Extensions',
collapsed: false,
items: [
{ text: 'File Upload', link: '/guides/extensions/file-upload' },
{ text: 'OTEL', link: '/guides/extensions/otel' },
{ text: 'Or Throw', link: '/guides/extensions/or-throw' },
],
},
],
},
socialLinks: [
{ icon: 'github', link: 'https://github.com/jasonkuhrt/graffle' },
],
Expand Down
32 changes: 32 additions & 0 deletions website/.vitepress/configExamples.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { DefaultTheme } from 'vitepress'

export const sidebarExamples: DefaultTheme.SidebarItem[] = [
{
'text': 'Arguments',
'link': '/examples/arguments',
},
{
'text': 'Config Fetch',
'link': '/examples/config-fetch',
},
{
'text': 'Config Http Headers',
'link': '/examples/config-http-headers',
},
{
'text': 'Raw Typed',
'link': '/examples/raw-typed',
},
{
'text': 'Raw',
'link': '/examples/raw',
},
{
'text': 'RawString Typed',
'link': '/examples/rawString-typed',
},
{
'text': 'RawString',
'link': '/examples/rawString',
},
]
20 changes: 20 additions & 0 deletions website/content/examples/arguments.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
aside: false
---

```ts twoslash
import './graffle/Global.js'
// ---cut---
import { Graffle as SocialStudies } from './graffle/__.js'

const socialStudies = SocialStudies.create()

const countries = await socialStudies.query.countries({
$: { filter: { name: { in: ['Canada', 'Germany', 'Japan'] } } },
name: true,
continent: { name: true },
})

console.log(countries)
// ^?
```
36 changes: 36 additions & 0 deletions website/content/examples/config-fetch.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
aside: false
---

```ts twoslash
import './graffle/Global.js'
// ---cut---
import { Graffle as SocialStudies } from './graffle/__.js'

const socialStudies = SocialStudies.create()
.use({
name: `CustomFetch`,
anyware: async ({ exchange }) => {
return await exchange({
using: {
fetch: async () => {
return new Response(
JSON.stringify({
data: { countries: [{ name: `Canada Mocked!` }] },
}),
)
},
},
})
},
})

// todo $scalars does not work
// todo intelisense for $ doesn't work
const countries = await socialStudies.query.countries({
name: true,
})

console.log(countries)
// ^?
```
Loading

0 comments on commit eeb59e9

Please # to comment.