diff --git a/src/graphql/client.ts b/src/graphql/client.ts
index 72c3e4769..1b474d65e 100644
--- a/src/graphql/client.ts
+++ b/src/graphql/client.ts
@@ -46,6 +46,25 @@ export const apolloClient = new ApolloClient({
       Shop: {
         keyFields: [],
       },
+      AttributeValue: {
+        fields: {
+          /**
+           * Since, API sometimes creates an empty slug,
+           * We need to handle that case also on front-end,
+           * so after fix that problem in the API, the UI will ablle
+           * to handle it.
+           *
+           * If the slug is empty, use the name
+           */
+          slug: (givenSlug, { readField }) => {
+            if (!givenSlug) {
+              return readField("name");
+            }
+
+            return givenSlug;
+          },
+        },
+      },
     } as TypedTypePolicies,
   }),
   link,