Как обновить кеш Strapi GraphQL после создания новых данных? - PullRequest
Новая
       180

Как обновить кеш Strapi GraphQL после создания новых данных?

5 голосов
/ 26 мая 2020

Как обновить кеш после создания новых данных?

Сообщение об ошибке от Apollo

Ошибка хранилища: приложение попыталось записать объект без предоставленного идентификатора но в магазине уже есть идентификатор UsersPermissionsUser: 1 для этого объекта. SelectionSet, который пытался записать: 


{
  "kind": "Field",
  "name": { "kind": "Name", "value": "user" },
  "arguments": [],
  "directives": [],
  "selectionSet": {
    "kind": "SelectionSet",
    "selections": [
      { "kind": "Field", "name": { "kind": "Name", "value": "username" }, "arguments": [], "directives": [] },

      { "kind": "Field", "name": { "kind": "Name", "value": "__typename" } }
    ]
  }
}

Nativescript- vue Front-end Details

enter image description here

1- Watch Book Mobile app in action on YouTube: https://youtu.be/sBM-ErjXWuw

2- Подробности смотрите в видео с вопросом на YouTube: https://youtu.be/wqvrcBRQpZg

{N} - vue AddBook . vue файл 

apolloClient
        .mutate({
          // Query
          mutation: mutations.CREATE_BOOK,
          // Parameters
          variables: {
            name: this.book.name,
            year: this.book.year,
          },
           // HOW TO UPDATE
          update: (store, { data }) => {
            console.log("data   ::::>> ", data.createBook.book);
            const bookQuery = {
              query: queries.ALL_BOOKS,
            };
// TypeScript detail: instead of creating an interface
// I used any type access books property without compile errors.
            const bookData:any = store.readQuery(bookQuery);
            console.log('bookData :>> ', bookData);
// I pin-pointed data objects
// Instead of push(createBook) I've pushed data.createBook.book
            bookData.books.push(data.createBook.book);
            store.writeQuery({ ...bookQuery, data: bookData })
          },
        })
        .then((data) => {
          // I can even see ID in Result
          console.log("new data.data id  ::::: :>> ", data.data.createBook.book.id);
          this.$navigateTo(App);
        })
        .catch((error) => {
          // Error
          console.error(error);
        });

Что это за "Book:9": { строки в кеше?

Выходит хранилище console.log: 

"Book:9": {
        "id": "9",
        "name": "Hadi",
        "year": "255",
        "__typename": "Book"
      },
      "$ROOT_MUTATION.createBook({\"input\":{\"data\":{\"name\":\"Hadi\",\"year\":\"255\"}}})": {

Здесь вы можете увидеть все интерфейсные репозитории GitHub

Наша цель - обновить кеш. Метод добавления книги здесь: https://github.com/kaanguru/mutate-question/blob/c199f8dcc8e80e83abdbcde4811770b766befcb5/nativescript-vue/app/components/AddBook.vue#L39

Сведения о серверной части

Однако это вопрос внешнего интерфейса, здесь работает запущенный сервер Strapi GraphQL: https://polar-badlands-01357.herokuapp.com/admin/

GraphQL Playground

ПОЛЬЗОВАТЕЛЬ: admin

ПАРОЛЬ: passw123

Вы можете увидеть документацию GraphQL

у меня есть так много простой Strapi GrapQL Схема:

simple Strapi GrapQL Scheme

If you want to test it using postman or insomnia you can use;

1 Ответ

3 голосов
/ 31 мая 2020

Оказывается;

весь код был правильным accept bookData.push(createBook);

          // HOW TO UPDATE
          update: (store, { data }) => {
            console.log("data   ::::>> ", data.createBook.book);
            const bookQuery = {
              query: queries.ALL_BOOKS,
            };
// TypeScript detail: instead of creating an interface
// I used any type access books property without compile errors.
            const bookData:any = store.readQuery(bookQuery);
            console.log('bookData :>> ', bookData);
// I pin-pointed data objects
// Instead of push(createBook) I've pushed data.createBook.book
            bookData.books.push(data.createBook.book);
            store.writeQuery({ ...bookQuery, data: bookData })
          },
        })

Typescipt помогал

Дело в том; Я не должен доверять ошибкам TypeScript, или, по крайней мере, мне нужно больше узнать о том, что он на самом деле говорит.

Typescript просто попросил меня быть более конкретным c, говоря: Property 'push' does not exist on type 'unknown'

TypeScript пытался сказать мне, что мне нужно быть более конкретным c при вызове данных ROOT_MUTATION. Он сказал: Cannot find name 'createBook' Но я снова проигнорировал это.

Решение Github Branch

https://github.com/kaanguru/mutate-question/tree/solution

Источники

как обновить кеш

Создать интерфейс для объекта Typescript

...