atlas

Atlas is available as an npm package.

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

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

3. Add the output to a types file in your project.

4. 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