Редактировать: это не работает, потому что я не звоню getInitialProps? Следующая JS документация (https://nextjs.org/docs/basic-features/data-fetching#server -side-render ) гласит, что если вы этого не сделаете, то страница статически отображается во время сборки. Поэтому я должен поместить свой useQuery внутрь getInitialProps?
Я тестирую клиентский интерфейс Apollo, который подключается через GraphQL к серверному модулю Keystone JS CMS. Один из способов проверить, работает ли SSR, - это, насколько я понимаю, загрузить страницу в браузере, проверить источник и посмотреть, есть ли там HTML. Это не работает для меня.
Источник страницы выглядит следующим образом (это уродливо, я просто проверяю, что соединения и SSR работают):
import React from 'react';
import Head from 'next/head';
import {useQuery} from '@apollo/react-hooks';
import gql from 'graphql-tag';
const ARTICLES_QUERY = gql`
query {
allArticles {
title
text
}
}
`;
const Home = () => {
// Create a query hook
const {data, loading, error} = useQuery(ARTICLES_QUERY);
console.log(data)
if (loading) {
return <p>Loading...</p>;
}
if (error) {
return <p>Error: {JSON.stringify(error)}</p>;
}
return (
<div>
<Head>
<title>Home</title>
<link rel="icon" href="/favicon.ico"/>
</Head>
<p>some paragraph text</p>
<div>And something in a div</div>
<ul>
{data?.allArticles?.map(article => {
return <li key={`article__${article.title}`}>{article.title}</li>;
})}
</ul>
</div>
);
};
export default Home;
Страница отображается как
и источником страницы для этой страницы является
<!DOCTYPE html><html><head><style data-next-hide-fouc="true">body{display:none}</style><noscript data-next-hide-fouc="true"><style>body{display:block}</style></noscript><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/development/pages/index.js?ts=1582296618319" as="script"/><link rel="preload" href="/_next/static/development/pages/_app.js?ts=1582296618319" as="script"/><link rel="preload" href="/_next/static/runtime/webpack.js?ts=1582296618319" as="script"/><link rel="preload" href="/_next/static/runtime/main.js?ts=1582296618319" as="script"/><noscript id="__next_css__DO_NOT_USE__"></noscript></head><body><div id="__next"><p>Loading...</p></div><script src="/_next/static/development/dll/dll_d6a88dbe3071bd165157.js?ts=1582296618319"></script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{},"apolloState":{},"apollo":null},"page":"/","query":{},"buildId":"development","isFallback":false}</script><script nomodule="" src="/_next/static/runtime/polyfills.js?ts=1582296618319"></script><script async="" data-next-page="/" src="/_next/static/development/pages/index.js?ts=1582296618319"></script><script async="" data-next-page="/_app" src="/_next/static/development/pages/_app.js?ts=1582296618319"></script><script src="/_next/static/runtime/webpack.js?ts=1582296618319" async=""></script><script src="/_next/static/runtime/main.js?ts=1582296618319" async=""></script><script src="/_next/static/development/_buildManifest.js?ts=1582296618319" async=""></script></body></html>
Ни мои данные c HTML, ни динамика c содержание там.
Я что-то упускаю здесь очевидное? Это кеш клиента Apollo? Я что-то упускаю из-за того, как Next JS должен работать? Это все при первой загрузке страницы, то есть я знаю, что он отображается на стороне клиента, когда вы переходите на стороне клиента, но это должно исходить прямо с сервера, нет?
Для чего это стоит, pages/_app.js is
import React from 'react';
import App from 'next/app';
import { ApolloProvider } from '@apollo/react-hooks';
import withData from '../util/apollo-client';
class MyApp extends App {
render() {
const { Component, pageProps, apollo } = this.props;
return (
<ApolloProvider client={apollo}>
<Component {...pageProps} />
</ApolloProvider>
);
}
}
// Wraps all components in the tree with the data provider
export default withData(MyApp)
и /util/apollo-client.js is
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import withApollo from 'next-with-apollo';
import { createHttpLink } from 'apollo-link-http';
import fetch from 'isomorphic-unfetch';
// Update the GraphQL endpoint to any instance of GraphQL that you like
const GRAPHQL_URL = 'http://localhost:3000/admin/api';
const link = createHttpLink({
fetch, // Switches between unfetch & node-fetch for client & server.
uri: GRAPHQL_URL
});
// Export a HOC from next-with-apollo
// Docs: https://www.npmjs.com/package/next-with-apollo
export default withApollo(
// You can get headers and ctx (context) from the callback params
// e.g. ({ headers, ctx, initialState })
({ initialState }) =>
new ApolloClient({
link: link,
cache: new InMemoryCache()
// rehydrate the cache using the initial data passed from the server:
.restore(initialState || {})
})
);