https://github.com/jacob-ebey/micro-graphql-monorepo
A tiny, simple to use GraphQL client with SSR support.
https://github.com/jacob-ebey/micro-graphql-monorepo
Last synced: about 1 year ago
JSON representation
A tiny, simple to use GraphQL client with SSR support.
- Host: GitHub
- URL: https://github.com/jacob-ebey/micro-graphql-monorepo
- Owner: jacob-ebey
- Created: 2020-02-12T21:14:40.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T02:14:34.000Z (over 3 years ago)
- Last Synced: 2025-04-01T20:12:39.840Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 6.47 MB
- Stars: 12
- Watchers: 2
- Forks: 1
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Micro GraphQL [](https://codecov.io/gh/jacob-ebey/micro-graphql-monorepo)
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](https://github.com/jacob-ebey/micro-graphql-monorepo/tree/master/packages/next-example)
- Create React App [EXAMPLE](https://github.com/jacob-ebey/micro-graphql-monorepo/tree/master/packages/cra-example), [PLAYGROUND](https://codesandbox.io/s/github/jacob-ebey/micro-graphql-monorepo/tree/master/packages/cra-example)
## Overview
### useQuery
```jsx
const { data, errors, loading } = useQuery(
YOUR_QUERY,
React.useMemo(
() => ({
example: variable
}),
[variable]
)
);
```
### useMutation
```jsx
const [{ data, errors, loading }, mutate] = useMutation(
YOUR_MUTATION,
React.useMemo(
() => ({
example: variable
}),
[variable]
)
);
return Run mutation;
```
## React quickstart
Install the required packages:
```shell
> 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.
```jsx
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 ? (
{data.allFilms.films.map(({ title, id }) => (
{title || id}
))}
) : null;
if (loading) {
return (
{selector}
Loading........
);
}
if (errors) {
return (
{selector}
Errors...
{JSON.stringify(errors, null, 2)}
);
}
return (
{selector}
Data!!!
{JSON.stringify(data, null, 2)}
);
};
const App = () => (
);
export default App;
```
## Contributors
The release process is currently manual and is done by running:
```bash
> yarn pub
```
This will build, version, tag and publish the packages to npm.