praveenweb / swr-graphql

A sample Next.js app using Zeit's SWR React Hooks to make GraphQL Queries/Mutations/Subscriptions

swr-graphql

The Idea behind the Example

This is a sample app demonstrating usage of useSWR, mutate and trigger of SWR library with a Hasura GraphQL API. The app uses native websockets for implementing GraphQL subscriptions on the client.

• Hasura GraphQL APIs for instant GraphQL backend.
• Integrate simple GraphQL queries.
• Optimistic UI with GraphQL mutations.
• GraphQL Subscriptions using native websockets.

Deploy Hasura to get a GraphQL API

1. Click on the following button to deploy GraphQL engine on Hasura Cloud including Postgres add-on or using an existing Postgres database:

   

2. Open the Hasura console

   Click on the button "Launch console" to open the Hasura console.

3. Create table users

   Head to the Data tab and create a new table called users with columns: id (text), name (text), created_at (timestamp now()).

4. Try out a GraphQL Query

   query {
       users {
           id
           name
           created_at
       }
   }

One-Click Deploy

Deploy your own SWR project with ZEIT Now.

How to Use

Install it and run:

yarn
yarn dev
# or
npm install
npm run dev

Deploy it to the cloud with now (download)

now

swr-graphql's Issues

Anonymous arrow functions cause Fast Refresh to not preserve local component state.

When running the example with npm run dev

The following warning is displayed in the console:

Anonymous arrow functions cause Fast Refresh to not preserve local component state.
Please add a name to your function, for example:

Before
export default () => <div />;

After
const Named = () => <div />;
export default Named;

A codemod is available to fix the most common cases: https://nextjs.link/codemod-ndc

The solution is to follow the codemod in the link above.

Example in index.js

Instead of:

export default ()  => {

You can change to:

export default function Main () {

To do in index.js, optimistic-ui.js and subscription.js

isomorphic-unfetch is not required with Next

According to the Next documentation:

In addition to fetch() on the client side, Next.js polyfills fetch() in the Node.js environment. You can use fetch() on your server code (such as getStaticProps) without using polyfills such as isomorphic-unfetch or node-fetch.

What is the purpose of `trigger` in the Optimistic UI example?

In this file, https://github.com/praveenweb/swr-graphql/blob/master/pages/optimistic-ui.js

What is the purpose of trigger(mutation)?

The official Optimistic UI example doesn't use that https://github.com/vercel/swr/blob/master/examples/optimistic-ui/pages/index.js

Thanks

Optimistic UI: The user id is missing in the GraphQL mutation

It prevents the GraphQL mutation to be effective because if the user id is required (and it should).
Your example works as is if the user id is not required but the uuid is not stored in the database.

Existing code:

   const mutation = {
      'query': 'mutation users($name: String!) { insert_users(objects: [{name: $name}]) { affected_rows } }',
      'variables': { name: text}
    };

Suggested change:

    // mutate current data to optimistically update the UI
    var id = uuidv4();
    mutate(query, {users: [...data.users, {id, name: text}]}, false)
    // send text to the API
    const mutation = {
      'query': 'mutation users($id: String!, $name: String!) { insert_users(objects: [{id: $id, name: $name}]) { affected_rows } }',
      'variables': { id: id, name: text}
    };