Skip to content

Latest commit

 

History

History
85 lines (69 loc) · 2.13 KB

README.md

File metadata and controls

85 lines (69 loc) · 2.13 KB

atlas

Build Status npm package npm downloads Code style

Atlas is available as an npm package.

Check out the latest Storybook to learn how to use the library.

alt text

GraphQL Autocompletion

  1. Download GraphQL for VS Code
  2. Download Watchman
  3. Add a .graphqlconfig file to the root of your project with the following contents:
{
  schema: {
    files: 'schema.graphql',
  },
  query: {
    files: [
      {
        match: ['src/**/*.js', 'src/**/*.tsx'],
        parser: ['EmbeddedQueryParser', { startTag: 'gql`', endTag: '`' }],
      },
    ],
  },
}

Type Generation using Codegen for GraphQL

  1. Visit https://graphql-code-generator.com/
  2. Paste your schema.graphql file into the generator with the following options:
generates:
  server-types.ts:
    config:
      avoidOptionals: true
      maybeValue: T
    plugins:
      - typescript
  1. Add the output to a types file in your project.

  2. Make queries

const query = gql`
  query {
    metacardsByTag(tag: "query-template") {
      status {
        hits
      }
      attributes {
        title
        id
        created
        modified
        description
        metacard_owner
      }
    }
  }
`
const { data, error, loading } = useQuery<InsertTypescriptTypeHere>(query)
if (loading) return <div>Loading</div>
if (error) return <div>Error</div>

if (!data) {
  return <div>Error</div>
}

const response = data.metacardsByTag