CODEWITHSUNDEEP
javascriptreactjstypescriptreact-nativereact-hooks
user13101751
user13101751

Reputation:

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.

Upvotes: 2

Views: 1420

Answers (2)

taubi19
taubi19

Reputation: 382

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;
};

Upvotes: 3

Liu Lei
Liu Lei

Reputation: 1297

export const useEditLocationName = (callback) => {
  return (params) => async(favouritePlaceId, customisedName) => {
    const [updateFavouritePlace] = useUpdateFavouritePlaceMutation({
      onCompleted: () => {
        if(callback){
          callback(params)
        }
        Alert.alert('Name aktualisiert');
      },
      onError: () => {
        Alert.alert('Oops, etwas ist schiefgelaufen');
      },
    });
    updateFavouritePlace({
      variables: {
        favouritePlaceId: favouritePlaceId,
        input: { customisedName: customisedName },
      },
    });
    return null;
  }

const editLocationName = useEditLocationName(setShowFlatList);
...
  const handleSubmitForm = (
    values: FormValues,
  ) => {
    editLocationName(params)(route.params.favouritePlaceId, values.locationName)
  };


/*
export const useEditLocationName = (callback) => {
  const [updateFavouritePlace] = useUpdateFavouritePlaceMutation({
    onCompleted: () => {
      if(callback){
        callback()
      }
      Alert.alert('Name aktualisiert');
    },
    onError: () => {
      Alert.alert('Oops, etwas ist schiefgelaufen');
    },
  });

  const editLocationName = async (
    favouritePlaceId: number,
    customisedName: string,
  ) => {
    updateFavouritePlace({
      variables: {
        favouritePlaceId: favouritePlaceId,
        input: { customisedName: customisedName },
      },
    });
    return null;
  };

  return editLocationName;
};
*/
....

Upvotes: 0

Related Questions