Micro GraphQL

A tiny, simple to use GraphQL client with SSR support, a normalized cache, and support for global state management.

Bundle sizes

• @micro-graphql/core:
• @micro-graphql/hooks:

Full examples

• NEXT.js with SSR and hydration EXAMPLE
• Create React App EXAMPLE, PLAYGROUND

Overview

useQuery

const { data, errors, loading } = useQuery(
  YOUR_QUERY,
  React.useMemo(
    () => ({
      example: variable
    }),
    [variable]
  )
);

useMutation

const [{ data, errors, loading }, mutate] = useMutation(
  YOUR_MUTATION,
  React.useMemo(
    () => ({
      example: variable
    }),
    [variable]
  )
);

return <button onClick={mutate}>Run mutation</button>;

React quickstart

Install the required packages:

> yarn add @micro-graphql/core @micro-graphql/hooks

Wrap your app in a client provider and you can use the hooks in any child component.

import React from 'react';
import gql from 'graphql-tag';
import { createCache, createClient } from '@micro-graphql/core';
import { MicroGraphQLProvider, useQuery } from '@micro-graphql/hooks';
import merge from 'deepmerge';

const microClient = createClient({
  fetch,
  cache: createCache(),
  url: "https://swapi-graphql.netlify.com/.netlify/functions/index"
});

const HOME_QUERY = gql`
  query ExampleQuery($id: ID) {
    film(id: $id) {
      id
      title
    }
    allFilms {
      films {
        id
        title
      }
    }
  }
`;

const HOME_CLIENT_QUERY = gql`
  query HomeClient {
    home {
      selectedEpisode
    }
  }
`;

const Home = () => {
  const [clientData, setClientData] = useClientQuery(
    HOME_CLIENT_QUERY,
    undefined,
    {
      home: {
        __typename: 'Home',
        selectedEpisode: 'ZmlsbXM6MQ=='
      }
    }
  );

  const handleEpisodeChanged = React.useCallback(
    (event) => {
      event.preventDefault();

      setClientData(
        merge(clientData, {
          home: {
            selectedEpisode: event.target.value
          }
        })
      );
    },
    [clientData, setClientData]
  );

  const { data, errors, loading } = useQuery(
    HOME_QUERY
    React.useMemo(
      () => ({
        id: clientData.home.selectedEpisode
      }),
      [clientData]
    )
  );

  const selector =
    data && data.allFilms && data.allFilms.films ? (
      <select defaultValue={`${clientData.home.selectedEpisode}`} onChange={handleEpisodeChanged}>
        {data.allFilms.films.map(({ title, id }) => (
          <option key={id} value={`${id}`}>
            {title || id}
          </option>
        ))}
      </select>
    ) : null;

  if (loading) {
    return (
      <React.Fragment>
        {selector}
        <h1>Loading........</h1>
      </React.Fragment>
    );
  }

  if (errors) {
    return (
      <React.Fragment>
        {selector}
        <h1>Errors...</h1>
        <pre>
          <code>{JSON.stringify(errors, null, 2)}</code>
        </pre>
      </React.Fragment>
    );
  }

  return (
    <React.Fragment>
      {selector}
      <h1>Data!!!</h1>
      <pre>
        <code>{JSON.stringify(data, null, 2)}</code>
      </pre>
    </React.Fragment>
  );
};

const App = () => (
  <MicroGraphQLProvider client={microClient}>
    <Home />
  </MicroGraphQLProvider>
);

export default App;

Contributors

The release process is currently manual and is done by running:

> yarn pub

This will build, version, tag and publish the packages to npm.