open-index/open-npm huggingface dataset:
npm package: @neonjungle/headless
Description: NJ headless configs
Author: Neon Jungle
Latest version: 1.1.4

# Headless

## Making a release

Make sure you are on the main branch and have the latest!!

Update the version using npm.

`npm version major|minor|patch`

push that commit and the tags using

`git push --tags`

Gitlab will build and publish the package with the new version.

## Apollo Client

To initialise in `_app.tsx`:

```
import { ApolloProvider } from "@apollo/client"
import { useApollo } from "@neonjungle/headless";

export default function App({ Component, pageProps }) {
  const apolloClient = useApollo(pageProps)

  return (
    <ApolloProvider client={apolloClient}>
      <Component {...pageProps} />
    </ApolloProvider>
  )
}
```

To initialise in `index.tsx` with `getStaticProps()`:

```
import { initializeApollo, addApolloState } from "@neonjungle/headless";

export async function getStaticProps() {
  const apolloClient = initializeApollo()

  await apolloClient.query({
    query: QUERY,
    variables: VARIABLES,
  })

  return addApolloState(apolloClient, {
    props: {},
    revalidate: 1,
  })
}
```

## TS Utils

```
import { keys, entries, fromEntries, values, assign, assert } from "@neonjungle/headless";

keys(object)
entries(object)
fromEntries(entries)
values(object)
assign(target, source)
assert(condition, message)
```

## Hooks

```
import { useIsDesktop, useOutsideClickAndEsc, useScrolled } from "@neonjungle/headless";

useIsDesktop(1024)
const ref = useOutsideClickAndEsc(() => alert("You clicked outside!"));
useScrolled(100)
```

## Next Auth

To initialise in `[...nextauth].js`:

```
import NextAuth from "next-auth";
import { authOptions } from "@neonjungle/headless";

const query = `mutation tokenAuth($email: String!, $password: String!) {
    tokenAuth(email: $email, password: $password) {
        success
        token
        errors
        refreshToken
        user {
            firstName
            lastName
            email
            organisation {
                title
            }
        }
    }
}`;

export default NextAuth(authOptions(query));
```

Note: `query` is optional and should only be used if additional user fields are required, 'organisation' is an additional field in this example.