[#60] Component re-render only on data change

Components would re-render even when data from api doesn't change. Special flag was needed to force re-render only on data change

src/api/LabelAPI.ts

@@ -12,5 +12,6 @@ const getLabel = async (iri: string) => {
 export const useLabel = (iri: string) => {
   return useQuery(["label", iri], () => getLabel(iri), {
     enabled: !!iri,
+    notifyOnChangeProps: ["data"],
   });
 };

src/api/TermAPI.ts

@@ -22,5 +22,6 @@ export const getTerm = async (searchResult: TermBase) => {
 export const useTerm = (searchResult: TermBase) => {
   return useQuery(["term", searchResult.uri], () => getTerm(searchResult), {
     enabled: !!searchResult.uri,
+    notifyOnChangeProps: ["data"],
   });
 };

src/api/VocabularyAPI.ts

@@ -24,6 +24,7 @@ export const useVocabulary = (vocabularyUri: string) => {
     () => getVocabulary(vocabularyUri),
     {
       enabled: !!vocabularyUri,
+      notifyOnChangeProps: ["data"],
     }
   );
 };

src/api/WordsAPI.ts

@@ -32,5 +32,6 @@ const getSearchResult = async (word: string | undefined) => {
 export const useSearch = (word: string | undefined) => {
   return useQuery(["search", word], () => getSearchResult(word), {
     enabled: !!word,
+    notifyOnChangeProps: ["data"],
   });
 };