https://github.com/kazekyo/nau
A tool that makes Apollo Client more productive for users using Relay GraphQL Server Specification compliant backends.
https://github.com/kazekyo/nau
apollo graphql graphql-code-generator
Last synced: 4 months ago
JSON representation
A tool that makes Apollo Client more productive for users using Relay GraphQL Server Specification compliant backends.
- Host: GitHub
- URL: https://github.com/kazekyo/nau
- Owner: kazekyo
- License: mit
- Created: 2021-02-08T11:12:02.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-08-11T18:47:58.000Z (almost 2 years ago)
- Last Synced: 2025-02-08T06:34:56.642Z (5 months ago)
- Topics: apollo, graphql, graphql-code-generator
- Language: TypeScript
- Homepage: https://www.naugraphql.com/
- Size: 11.1 MB
- Stars: 17
- Watchers: 3
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: MIT-LICENSE.txt
Awesome Lists containing this project
README
Nau
Nau is a tool that makes [Apollo Client](https://github.com/apollographql/apollo-client) more productive for users using [Relay GraphQL Server Specification](https://relay.dev/docs/guides/graphql-server-specification) compliant backends.
- Make cache operations very easy
- Provide custom directives to write declaratively and improve productivity
- Support co-location of components and fragments by allowing a query to split into the fragments
- Support subscriptions
The tool aims to help frontend developers build frontend applications more quickly, with fewer bugs, and more efficiently.
Nau is a perfect fit with React, Apollo Client, GraphQL Code Generator, and TypeScript.
## Installation
```
yarn add @kazekyo/nau
yarn add --dev @kazekyo/nau-graphql-codegen-preset
```
> ⚠️ The packages are currently under development. All version updates may have breaking changes.
## Documentation
https://www.naugraphql.com
## Example
See the [example code](https://github.com/kazekyo/nau/tree/main/examples/app).
You can write pagination and cache updates more easily using some GraphQL directives. :rocket:
```src/List.tsx
import { gql, useMutation, useSubscription } from '@apollo/client';
import { usePagination } from '@kazekyo/nau';
import * as React from 'react';
import {
AddItemMutationDocument,
ItemAddedSubscriptionDocument,
ItemRemovedSubscriptionDocument,
List_PaginationQueryDocument,
List_UserFragment
} from './generated/graphql';
import ListItem from './ListItem';
gql`
fragment List_user on User
@argumentDefinitions(count: { type: "Int", defaultValue: 2 }, cursor: { type: "String" })
@refetchable(queryName: "List_PaginationQuery") {
items(first: $count, after: $cursor) @pagination {
edges {
node {
...ListItem_item
}
}
}
...ListItem_user
}
mutation AddItemMutation($input: AddItemInput!, $connections: [String!]!) {
addItem(input: $input) {
item @prependNode(connections: $connections) {
...ListItem_item
}
}
}
subscription ItemAddedSubscription($connections: [String!]!) {
itemAdded {
item @prependNode(connections: $connections) {
...ListItem_item
}
}
}
subscription ItemRemovedSubscription {
itemRemoved {
id @deleteRecord(typename: "Item")
}
}
`;
const List: React.FC<{ user: List_UserFragment }> = ({ user }) => {
useSubscription(ItemAddedSubscriptionDocument, {
variables: {
connections: [user.items._connectionId],
},
});
useSubscription(ItemRemovedSubscriptionDocument);
const [addItem] = useMutation(AddItemMutationDocument);
const { nodes, hasNext, loadNext, isLoading } = usePagination(List_PaginationQueryDocument, {
id: user.id,
connection: user.items,
});
return (
<>
void addItem({
variables: {
input: { itemName: 'new item', userId: user.id },
connections: [user.items._connectionId],
},
})
}
>
Add Item
{nodes.map((node) => {
return (
);
})}
{hasNext && (
loadNext(2)} disabled={!hasNext}>
Load more
)}
>
);
};
export default List;
```