Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Antony-Figueroa/my-evershop-app/llms.txt

Use this file to discover all available pages before exploring further.

​
Introduction

GraphQL queries allow you to fetch data from your EverShop application. This page documents all available queries across the application’s extensions.

​
Query Structure

Queries in EverShop follow the standard GraphQL query syntax: 
query QueryName {
  fieldName(argument: value) {
    field1
    field2
    nestedObject {
      nestedField
    }
  }
}

​
Sample Extension Queries

The sample extension demonstrates basic query patterns with the Foo type.

​
Query: foo

Fetch a single Foo object by ID.
​
id
ID!
required
The unique identifier of the Foo object
​
foo
Foo
Returns a Foo object or null if not found
query GetFoo {
  foo(id: "1") {
    id
    name
    description
  }
}

​
Query: foos

Fetch all Foo objects.
​
foos
[Foo!]!
Returns an array of all Foo objects (never null)
query GetAllFoos {
  foos {
    id
    name
    description
  }
}

​
Product Extension Queries

The productCatalog extension extends the core Product type with supplement-specific data.

​
Extended Type: Product

When querying products, you can access supplement information through the extension field.
​
extension
ProductExtension
Additional product data extensions
query GetProductWithExtensions {
  product(id: "123") {
    id
    name
    price
    extension {
      supplement {
        ingredients
        benefits
        presentation
        dosage
        warnings
        storage
      }
    }
  }
}

​
Query Examples in Components

Here’s how to use GraphQL queries in page components:

​
Basic Query Example

extensions/sample/src/pages/frontStore/fooList/FooList.tsx
import React from 'react';

type Foo = {
  id: string;
  name: string;
  description?: string;
};

type FooListProps = {
  foos?: Foo[];
};

export default function FooList({ foos = [] }: FooListProps) {
  return (
    <div className="foo-list">
      <h1>All Foos</h1>
      {foos.map((foo) => (
        <div key={foo.id} className="foo-item">
          <h2>{foo.name}</h2>
          {foo.description && <p>{foo.description}</p>}
        </div>
      ))}
    </div>
  );
}

export const layout = {
  areaId: 'content',
  sortOrder: 30
};

export const query = `
  query {
    foos {
      id
      name
      description
    }
  }
`;

​
Query with Arguments

export const query = `
  query GetFoo($fooId: ID!) {
    foo(id: $fooId) {
      id
      name
      description
    }
  }
`;

​
Query Best Practices

Request Only What You Need

Only query the fields you actually need to reduce data transfer and improve performance.

Use Fragments

Use GraphQL fragments to reuse common field selections across multiple queries.

Handle Null Values

Always check for null values in your components when fields are nullable.

Use Variables

Use query variables instead of string interpolation for dynamic values.

​
Error Handling

Queries can return errors in the response: 
{
  "data": {
    "foo": null
  },
  "errors": [
    {
      "message": "Foo with id 999 not found",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ],
      "path": ["foo"]
    }
  ]
}
Always check both the data and errors fields in the GraphQL response.

​
Creating Custom Queries

To add a new query to your extension:
  1. Define the query in your GraphQL schema: 
    type Query {
  myCustomQuery(arg: String!): CustomType
}
  2. Implement the resolver: 
    export default {
  Query: {
    myCustomQuery: (root, { arg }, context) => {
      // Implementation
      return customData;
    }
  }
};
  3. Use it in your components: 
    export const query = `
  query {
    myCustomQuery(arg: "value") {
      field1
      field2
    }
  }
`;

​
Next Steps

GraphQL Mutations

Learn how to modify data with mutations

GraphQL Overview

Review GraphQL architecture and concepts

Build docs developers (and LLMs) love

Get started for freeTalk to us