Use more general and translated error messages for GraphQL and Network error snackbars

aleksis/core/assets/app.js

@@ -67,7 +67,7 @@ Vue.use(VueRouter);
 export const typeDefs = gql`
   type snackbarItem {
     id: ID!
-    message: String!
+    messageKey: String!
     color: String!
     read: Boolean!
   }
@@ -100,7 +100,7 @@ const resolvers = {
   },
 };
 
-function addErrorSnackbarItem (error) {
+function addErrorSnackbarItem (messageKey) {
   let uuid = crypto.randomUUID();
   cache.writeQuery({
     query: gqlSnackbarItems,
@@ -109,7 +109,7 @@ function addErrorSnackbarItem (error) {
         {
           __typename: "snackbarItem",
           id: uuid,
-          message: error,
+          messageKey: messageKey,
           color: "red",
           read: false
         },
@@ -124,12 +124,9 @@ function addErrorSnackbarItem (error) {
 const retryLink = new RetryLink();
 
 const errorLink = onError(({ graphQLErrors, networkError }) => {
-  if (graphQLErrors)
-    graphQLErrors.map(({ message, locations, path }) =>
-      addErrorSnackbarItem(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`),
-    )
+  if (graphQLErrors) addErrorSnackbarItem("graphql_errors.snackbar_error_message")
 
-  if (networkError) addErrorSnackbarItem(`[Network error]: ${networkError}`)
+  if (networkError) addErrorSnackbarItem("network_errors.snackbar_error_message")
 });
 
 const httpLink = new HttpLink({

aleksis/core/assets/components/SnackbarItem.vue

 <template>
   <v-snackbar v-model="!snackbarItem.read" :color="snackbarItem.color">
-    {{ snackbarItem.message }}
+    {{ $t(snackbarItem.messageKey) }}
     <template v-slot:action="{ attrs }">
       <v-btn icon @click="checkSnackbarItem(snackbarItem.id)" ><v-icon>mdi-close</v-icon></v-btn>
     </template>

aleksis/core/assets/messages.json

@@ -239,7 +239,11 @@
     "network_errors": {
       "error_404": "404",
       "page_not_found": "The requested page or resource could not be found.",
-      "take_me_back": "Take me back"
+      "take_me_back": "Take me back",
+      "snackbar_error_message": "There was an error with your network. Please try again."
+    },
+    "graphql_errors": {
+      "snackbar_error_message": "There was an error accessing the page data. Please try again."
     },
     "service_worker": {
       "new_version_available": "A new version of the app is available",

aleksis/core/assets/snackbarItems.graphql

 {
   snackbarItems @client {
     id
-    message
+    messageKey
     color
     read
   }