javascriptreactjstypescriptreact-nativereact-hooks

pass a function to a custom react hook


Previously, I was using a graphql query like this. The data is returned from the query and I use setShowFlatListwith the datareturned:

  const [loadUsers, { data }] = useUsersLazyQuery({
    onCompleted: () => {
      setShowFlatList(data);
    },
});

Now I am creating a custom react hook where I use this graphql query. It looks like this:

export const useLoadUsers = (onCompleted: any) => {
  const [usersQuery, { data }] = useUsersLazyQuery({
    onCompleted: () => {
      if(onCompleted){
        onCompleted();
      }
    },
    onError: onLoadUserError,
    fetchPolicy: 'network-only',
  });

const loadUsers = async (
phoneNumber: number,
) => {
  const data = await usersQuery({
    variables: {
      where: {
        OR: [
          { phoneNumber: newPhoneNumber }
        ],
      },
    },
    });
  return data;
};
return loadUsers;
};

But I cannot figure out how to pass the setShowFlatList function to the onCompleted of the hook, such that I can still use dataas its parameter from within the hook.


Solution

  • EDIT: The onCompleted should also have a parameter data, so you can use that one.

    export const useLoadUsers = (onCompleted: any) => {
      const [usersQuery, { data }] = useUsersLazyQuery({
        onCompleted: (data) => {
          if(onCompleted){
            onCompleted(data);
          }
        },
        onError: onLoadUserError,
        fetchPolicy: 'network-only',
      });
    
    const loadUsers = async (
    phoneNumber: number,
    ) => {
      const data = await usersQuery({
        variables: {
          where: {
            OR: [
              { phoneNumber: newPhoneNumber }
            ],
          },
        },
        });
      return data;
    };
    return loadUsers;
    };