Skip to content

jordanwilking/atlas

 
 

Repository files navigation

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

Packages

No packages published

Languages

  • TypeScript 80.6%
  • JavaScript 19.4%