Skip to content

Conversation

@stubailo
Copy link
Contributor

I went on a quest to design a schema that exercises every feature of GraphQL schemas I know of, and this is what I have so far.

The other goal is to reimplement the schema using the schema language directly, rather than having it in comments that are in danger of becoming outdated.

@stubailo
Copy link
Contributor Author

stubailo commented Aug 31, 2016

Notes from @tmeasday:

  • Input object types?
  • Mutations not defined
  • Argument to search shouldn't be called query, it's too vague

@ghost ghost added the CLA Signed label Aug 31, 2016
type Query {
hero(episode: Episode): Character
droid(id: ID!): Droid
droid(id: String!): Droid
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's good to encourage the best practice of using ID type for id fields/arguments

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I noticed that the old example schema had String instead of ID, but let's upgrade.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see why that is a best practice - the only benefit of ID is that you can pass it an int and it will automatically cast to a string, right? normally you would not want to do that in your schema AFAICT. if it's a string in your database it seems safer to have it be a string in graphql.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also don't really see the benefit of IDs, but it seems like a lot of people value them. Dan Schafer went out of his way in his React Europe talk to mention how non-user-readable IDs should be treated specially.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Being more generally accepting of a wider range of input is one benefit, but the primary benefit is the semantic value. It distinguishes from strings you might display to a user.

It also helps in migrations when you might start using Int based ids but later realize the scale problem and want to migrate to 64int or String based ids. Or when you need to unify multiple systems which use different storage types for their ids. This is a very real problem we faced at Facebook many times, and so making String/Int backing an implementation detail of the semantic ID offers more freedom for implementors and shields clients from that

@leebyron
Copy link
Collaborator

Perhaps for mutations you can add a rating to a film and query ratings? That seems more realistic than adding characters to a film

@stubailo
Copy link
Contributor Author

I was trying to figure out a use case for input objects, and creating a new object seems like the most common use for them. But perhaps we could just skip input objects.

@leebyron
Copy link
Collaborator

Also while you're at it - take a look at some of the examples on /index.html - they're chosen for simplicity to fit on the screen, but it would be awesome if they aligned well with the schema used throughout examples.

@leebyron
Copy link
Collaborator

leebyron commented Aug 31, 2016

For input objects, how about:

input ReviewInput {
  # 0-5 stars
  stars: Int

  # what'd you think?
  commentary: String
}

type Mutation {
  addReview(film: ID!, review: ReviewInput!): AddReviewResult
}

type AddReviewResult {
  didSucceed: Boolean!
  film: Film
  review: Review
}

@stubailo
Copy link
Contributor Author

OK, I see that you're thinking of the schema as strictly about the movies, not as an in-universe thing (adding characters, or giving someone credits, doesn't make sense if you're thinking about it as a movie resource for fans). So the schema use case is "a schema for an app where fans can learn and interact about starwars"

@leebyron
Copy link
Collaborator

It could go either way, but we need to expand it in some sensible way to support these other featuees for ease of explanation :)

@leebyron
Copy link
Collaborator

leebyron commented Sep 1, 2016

Re IDs:

Being more generally accepting of a wider range of input is one benefit, but the primary benefit is the semantic value. It distinguishes from strings you might display to a user.

It also helps in migrations when you might start using Int based ids but later realize the scale problem and want to migrate to 64int or String based ids. Or when you need to unify multiple systems which use different storage types for their ids. This is a very real problem we faced at Facebook many times, and so making String/Int backing an implementation detail of the semantic ID offers more freedom for implementors and shields clients from that

@stubailo
Copy link
Contributor Author

stubailo commented Sep 1, 2016

For reference, here are all the code samples from index.html:

  • 1
"hero": {
    "name": "Luke Skywalker",
    "eyeColor": "blue",
    "hairColor": "blond"
  }
  • 2
{
  hero {
    name
    friends {
      name
    }
  }
}
  • 3
{
  hero {
    name
    friends {
      name
      homeWorld {
        name
        climate
      }
      species {
        name
        lifespan
        origin {
          name
        }
      }
    }
  }
}
type Query {
  hero: Character
}

type Character {
  name: String
  friends: [Character]
  homeWorld: Planet
  species: Species
}

type Planet {
  name: String
  climate: String
}

type Species {
  name: String
  lifespan: Int
  origin: Planet
}
  • 4
type Film {
  title: String
  episode: Int
  releaseDate: String
  openingCrawl: String
  director: String @deprecated
  directedBy: Person
}

type Person {
  name: String
  directed: [Film]
  actedIn: [Film]
}

I don't think we should update the example schema to include all of these types, but I think we can rewrite the examples to draw from a more concise schema.

@ghost ghost added the CLA Signed label Sep 1, 2016
@leebyron
Copy link
Collaborator

leebyron commented Sep 1, 2016

Cool. Doesn't have to be perfect. Front page should optimize for simplicity rather than consistency with the rest of the docs, but places where consistency is a no brainer should change

@stubailo
Copy link
Contributor Author

stubailo commented Sep 1, 2016

OK, going to merge this for now since all of the existing examples have been converted.

@stubailo stubailo merged commit dd6dc8d into new-source Sep 1, 2016
@stubailo stubailo deleted the new-schema branch September 9, 2016 23:18
saihaj pushed a commit that referenced this pull request Sep 2, 2025
* Start working on Hero, upgrade Nextra to 3.3.1

* Work around _meta validation

* Make the hero look like on designs

* Format

* wip

* style the navbar more

* Fight HeadlessUI

* Get rid of ts-expect-error

* Update lockfile

* Format

* Comment out the banner for now

* Add logos of companies using GraphQL

* Rename gql-conf-section and gql-conf-container

* Add missing pointer-events-none to navbar

* Lay out the new TrustedBy section

* Add a divider between logos

* Tweak the logos for mobile and dark mode

* Tweak Trusted By section styles

* Change index page background color

* Restyle how-it-works section

* Improve mobile styles in HowItWorks

* Remove external link arrow from Spec link in Navbar

* Draft Proven Solution section

* Use proper blur blob (wrong stripes colors tho)

* Tweak navbar blur

* Fix Proven Solution mobile styles

* Tweak paddings

* Tweak opacity

* Add a TODO

* Add Five Pillars section

* Tweak styles

* Add icons, tweak the medium viewport styles

* Rename a variable

* Add Powered by the Community card

* Add GraphQL Advantages section

* Add Precision figure

* WIP

* Eject Pre component

* Tweak colors, fix bugs

* Change colors based on design's feedback

* Add OptimizationFigure

* wip

* Add extra padding

* Improve the landing

* wip

* Scroll in Consistency figure

* Tweak colors

* Remove paddings on narrow mobiles

* Add Integration figure, improve padding

* Fix the width for mobiles

* Unify line height in Precision section

* Format

* Add Quotes From Industry section

* Add Join the Community section

* wip

* Remove old Bring Your Own Code version, tweak styles

* Tweak the width of the arrow box

* Fix type error

* Hide "Join" on small screens

* wip

* WIP

* Add Data Colocation section

* Add .gql-all-anchors-focusable

* Unify focus styles

* Format

* Mark sectors

* wip

* Count curlies

* wip

* wip

* Add missing Webkit prefixes for older Chrome.

* wip

* simplify

* wip

* wip

* Animate wires

* Add a TODO comment

* Bugfix mobile Data Colocation section

* Remove redundant comment

* Make the step transition nice

* wip

* wip

* Okay, this is pretty good

* Tweak styles

* Change gql keyword color

* Update Search input and Kbd styles

* Run format

* Revert to old footer links, simplify the code

* Tweak the navbar link styles

* Polish the footer links

* Improve data allocation layout for tablets

* Highlight query

* wip (transition between 2 and 3 still bad)

* wip

* Fix Safari

* Rotate queries in X axis

I had to do it because of a bug with opacity and
backdrop-filter.

* Fix styles

* Make the What is GraphQL illustration taller on mobiles

* Fix sponsor logos on Safari

* Fix social icon colors if user localStorage color scheme doesn't match system color scheme

* Fix double spins (again)

* Disable overscroll-y in Safari to make the hero look less weird

* Fix Nicolai's pic, remove scroll-snap

* Add shrink-0 to fix Safari

* Format

* Tweak mobile styles

* Fix lint error (bad class)

* Add a subtle background to Hero

* Update copy and add shrink-0

* Speed up the animation by 2x

* Bump the stroke width

* Add serve:build script

* Change h4 to h3 to fix the order

* Add aria-label to company logos

* Add fetchPriority to ImageLoaded and use it in Hero

* Move hero to a directory

* Add aria-label to social icons

* Add aria-label, change blur logo to webp

* Add description

* Add longer texts with sr-only

* Inherit tabIndex in Pre

* Run image export optimizer

* post-audit improvements

* Add fetchpriority=low

* Add fetchPriority=low to testimonials images

* Add bundle analyzer

* Add meta description

* Remove redundant markdown parser code

* Add Playwright

* Add tests for MiniGraphiQL

* Move Playwright to optional dependencies

* Fix links

* Actually, these redirects make sense

* Update lockfile

* add Curtain

* Fix ProductivityFigure

* wip

* wip

* Add UseCases

* Improve DataColocation on very small phones

* Tweak mobile UI

* Iterate on wording

* Use dynamic for MiniGraphiQL

* Add missing role tab

* Fix roles not contained

* Add aria-hidden to video

* Add link rel=preload to Hero

* Fix type error

* Fight aria-role, get rid of world wrap button

* Remove aria-selected fro mobile tab

* Add wide browserslist to package.json

* Fix indentation in docs-validation.yml

* Format

* Format

* Switch out @theguild/remark-mermaid to for rehype-mermaid

* Expose Heading hooks from nextra-theme-docs

* Customize MDX links and headings

* Support Tailwind text opacity in typography-link

* fixup! Expose Heading hooks from nextra-theme-docs

* fixup! Expose Heading hooks from nextra-theme-docs

* Style Mermaid charts with CSS Custom Properties

* Fix search styles

* install Chromium Headless Shell in builds

* Install libnspr4 and libgbm1 in builds

* Update lockfile

* patch mermaid-isomorphic

* Patch again

* Update flowchart padding

* Remove old comment

* Remove duplicate border

* Clarify GraphQL works at "any" scale

Co-authored-by: Benjie <[email protected]>

* validated queries -> validated requests

Co-authored-by: Benjie <[email protected]>

* new landing — vertical diagram (#43)

* Extract edges and boxes out from the components.

* Make diagram boxes and edges responsive

* Make the diagram less tall

* Animate client edge on small screens

* Animate server edges on small screens

* Remove next step on background click per Uri's request

* Rotate query sideways on small screens

* *the* GraphQL spec

Co-authored-by: Benjie <[email protected]>

* Change "Reduce dependencies" to "Reduce communication overhead"

Co-authored-by: Jeff Auriemma <[email protected]>

* new landing — try it out link (#44)

* Add [Try it out] link to the Hero

* Add redirect from /docs to /learn

* Ignore Lucide in autoImport

* Add scroll-into-view-if-needed

* Eject Sidebar from Nextra

* Replace Nextra MDX Wrapper and restyle TOC

* Fix type error in a patch

* Add Matteo's quote

* Fix a bad link

* Update src/components/index-page/use-cases/index.tsx

Co-authored-by: Martin Bonnin <[email protected]>

* Update src/components/index-page/powered-by-community.tsx

Co-authored-by: Martin Bonnin <[email protected]>

* Update src/components/index-page/trusted-by/index.tsx

Co-authored-by: Martin Bonnin <[email protected]>

* Tweak the AI-powered app description

* Add Uri's quote

* Use shorter copy in Hero

Co-authored-by: Martin Bonnin <[email protected]>

* format

* Add Benjie's quote

* Shorten Benjie's quote even more

* Change ! to .

* learn — new interactive code blocks (#47)

* Render MiniGraphiQL with `graphiql` string in node.meta

* Don't validate in Marked: not its responsibility

* Change interactive code snippet colors

* Remove global .miniGraphiQL class

* Refactor MiniGraphiQL to separate files

* Add a TODO comment

* Run Playwright on CI

* wip

* color codemirrors properly

* Style codemirrors properly

* Upgrade pnpm from 9.15.9 to 10.15.0

* Update 2025 conference schedule and speaker details

* Improve syntax highlighting for comments and diffs

* Remove focus outline

* Extract CodeBlockLabel

* Remove unused marked dependency

* Rename `marked` to `interactive-code-block`

* Update codemirror styles

* Allow running esbuild builds

* Remove duplicate image

* Format

* Change syntax theme names to avoid a bug

* Fix heights and properly chain handlers

* Fix tests for new editor

* Run Playwright on CI

* Use the same colors for VariableEditor

* Use the same font for interactive code blocks

* Match the coloring on t.separator [,:] between Lezer and Shiki

* Remove duplicate t.separator

* Add iframe-resizer and sharp to onlyBuiltDependencies

* Start running lychee and snippet validation again

* Add JSDoc types to validate-snippets.js

* Remove a validation that never worked (we'll add something else later)

* fix a broken link to FAQ

* Improve testimonial images

---------

Co-authored-by: Benjie <[email protected]>
Co-authored-by: Jeff Auriemma <[email protected]>
Co-authored-by: Martin Bonnin <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants