Конфигурирование пользовательского интерфейса материала с помощью Next. js и response-apollo; правильное использование getDataFromTree - PullRequest
Новая
       36

Конфигурирование пользовательского интерфейса материала с помощью Next. js и response-apollo; правильное использование getDataFromTree

2 голосов
/ 19 марта 2020

У меня есть приложение, в котором я столкнулся с проблемой. Насколько я знаю, проблема root заключается в некорректном запросе Apollo (например, при попытке распространения data, пока он все еще undefined). Это приводит к странному пользовательскому интерфейсу, в котором есть огромные значки, и к предупреждению такого рода :

Warning: Prop className did not match. Server: "MuiSvgIcon-root-69" Client: "MuiSvgIcon-root"

После некоторых исследований я обнаружил, что Причиной этого может быть disableGeneration prop, который должен быть установлен на true по соображениям производительности, но я также подозреваю, что если он включен, MUI пропускает генерацию className и выдает правильные имена классов в качестве результата.

Вопрос в том, как правильно его использовать, или есть ли другой способ решить эту проблему? Мои стеки выглядят следующим образом:

  • следующий. js 9.1.1
  • материал UI 4.6.0
  • Reaction-Apollo 3.1.2

Я пробовал несколько комбинаций использования StylesProvider и ServerStyleSheets, хотя мне не удалось выполнить работу. В настоящее время я использую это в _document.js: 

const sheets = new ServerStyleSheets({
  injectFirst: true
});

И вот как я использую getDataFromTree, хотя это выглядит довольно странно для меня: 

const sheets = new ServerStyleSheets({
  disableGeneration: true
});

await getDataFromTree(sheets.collect(<AppTree {...appProps} />));

У меня было Я много гуглил, но не смог найти краткого результата о том, как использовать SSR с Apollo & Material. Любая помощь будет высоко ценится:)

...