react-hook-form validate with custom hooks.

[novaknole]

Hi @thanh-nguyen-95 @bluebill1049

I have a react + react-hook-form question

I have:

rules={{
            required: 'This is required.',
            validate: (value) => daoExists(value),
          }}

with daoExists, I need to check graphql endpoint and if it returns true, validation succeeds, otherwise some error message. I am using useQuery hooks from apollo client for such queries, but now I have a problem, because daoExists can't be a hook. So, what I am doing is I create a daoExists as normal function. Something like this:

export const daoExists = async (name: string): Promise<ValidateResult> => {
  const query = `
    query Daos($name: String) {
      daos(where: {name: $name}){ 
        id
      }
    }
  `;

  const data = await fetch(subgraphUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
    },
    body: JSON.stringify({
      query,
      variables: { name: name },
    }),
  });

  const daos = await data.json();
  return daos?.data?.daos?.length > 0 || 'Dao with this name already exists';
};

Which I really don't like to use fetch and I wanna continue using useQuery hooks, but I can't. I even tried creating useCallback , but then I can't use useQuery in my useCallback.

Any workarounds ?

[novaknole]

@bluebill1049 Hey,

Any chance you could look into this ? sorry for the reminder.