DEV Community

The magic of react-query and supabase

Ankit Jena on June 28, 2021

It's been a while since I wrote my last article on state management in React using Context. Here's the link for anyone who wants to give it a read....

Read full post

Amo Moloko • Jul 7 '21

Excellent work. 🌟

Only thing I would do differently is to create a resuable function for storing your form state.

You use the following pattern:

//useState declearation
 const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  //in the JSX part of the component
          <input 
            type="text" 
            onChange={e => setEmail(e.target.value)}
        />

Which could be upgraded to:

const [formState, setFormState] = useState({})

const updateFormState = (field,value) => {

   const newState = {
        [`${field}`]:value,
       ...formState
      }

     setFormState(newState)
}


    //JSX

      <input 
            type="text" 
            onChange={e => updateFormState("email",e.target.value)}
        />

hmenchaca • Jun 29 '21

Amazing!

Ankit Jena • Jun 29 '21

Glad you liked it!

Mathew Chan • Jun 30 '21

Thank you for making this tutorial. This is almost exactly what I needed, but I used NextAuth.js to create the authentication table.

Ankit Jena • Jul 1 '21

So did you connect nextauth with the supabase postgres instance

Mathew Chan • Jul 1 '21 • Edited

I did. Several things I had to do different.

Instead of .env.local, I had to add the supabase environment variables to next.config.js because the client supabase is declared client side instead of server side.

With nextauth I had to do an async call getSession() to request the userId first before querying because the userId isn't exposed to the default session object for security reasons

This was also my first time using Typescript so there were all kinds of issues trying to follow the code to get it working on my own project.