https://github.com/devunt/mearie

Framework-agnostic GraphQL client with end-to-end type safety, normalized caching, and fragment colocation for React, Vue, Svelte, and Solid
https://github.com/devunt/mearie

codegen graphql graphql-client react solid svelte type-safety typescript vue

Last synced: 3 months ago
JSON representation

Framework-agnostic GraphQL client with end-to-end type safety, normalized caching, and fragment colocation for React, Vue, Svelte, and Solid

• Host: GitHub
• URL: https://github.com/devunt/mearie
• Owner: devunt
• License: mit
• Created: 2025-10-19T16:22:46.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2026-02-25T12:46:50.000Z (3 months ago)
• Last Synced: 2026-02-25T13:56:38.875Z (3 months ago)
• Topics: codegen, graphql, graphql-client, react, solid, svelte, type-safety, typescript, vue
• Language: TypeScript
• Homepage: https://mearie.dev
• Size: 3.57 MB
• Stars: 22
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


# Mearie

[![npm](https://img.shields.io/npm/v/mearie)](https://www.npmjs.com/package/mearie)

[![License](https://img.shields.io/github/license/devunt/mearie)](https://github.com/devunt/mearie/blob/main/LICENSE)

**The Pragmatic GraphQL Client**

A full-featured, framework-agnostic GraphQL client built on proven architectural patterns. Mearie delivers end-to-end type safety, normalized caching, and fragment colocation through ahead-of-time compilation. Write queries as template literals and get complete type inference from schema to UI components.

Supports React, Vue, Svelte, Solid, and vanilla JavaScript through dedicated integrations.

## Architecture

Mearie consists of two parts:

- `mearie` - Build-time code generation and tooling (dev dependency)

- `@mearie/{framework}` - Framework-specific runtime with client and bindings

Here's a quick example:

```tsx

import { graphql, schema } from '$mearie';

import { createClient, httpExchange, cacheExchange, ClientProvider, useQuery } from '@mearie/react';

const client = createClient({

  schema,

  exchanges: [cacheExchange(), httpExchange({ url: 'https://api.example.com/graphql' })],

});

export function App() {

  return (

    

      

    

  );

}

function UserProfile({ userId }: { userId: string }) {

  const { data, loading } = useQuery(

    graphql(`

      query GetUser($id: ID!) {

        user(id: $id) {

          id

          name

          email

        }

      }

    `),

    { id: userId },

  );

  if (loading) return 
Loading...
;

  return 
{data.user.name}
;

}

```


## Documentation

Full documentation is available at .

## Acknowledgments

Mearie's stream-based exchange system and core implementation are derived from [urql](https://github.com/urql-graphql/urql) and [Wonka](https://github.com/0no-co/wonka). The exchange architecture and stream utilities closely follow the original work by the urql team, adapted and extended for Mearie's specific goals. See [ACKNOWLEDGMENTS](./ACKNOWLEDGMENTS.md) for detailed attribution.

## Etymology

The name _Mearie_ (pronounced /meh-ah-ree/) comes from the Korean word

메아리, meaning _echo_.