Самый простой способ кэширования данных с помощью клиента Apollo в Next.js

В приложении Next.js выборка данных может быть сложной в зависимости от варианта использования приложения. Хотя Next.js предоставляет несколько методов выборки данных (SSR, SSG, CSR и т. д.), иногда необходимо оптимизировать процесс выборки данных, чтобы уменьшить количество запросов и повысить производительность. Один из способов добиться этого — реализовать кэширование.

Решение. Клиент Apollo — популярный выбор для управления данными и состоянием в приложении Next.js. Он обеспечивает эффективное кэширование, которое помогает избежать ненужных сетевых запросов и повышает производительность. В этом руководстве мы покажем, как интегрировать клиент Apollo с API GraphQL и как реализовать кэширование в приложении Next.js.

Итак, начнем. Я привожу простое пошаговое решение для установки graphql и извлечения данных и показываю его в nextjs, конечно, в этой статье я не все рассмотрел, и это очень простая его реализация. но это хорошо для начала
Шаги:

1. Установите и настройте клиент Apollo.

• Установите пакет @apollo/client с помощью npm или yarn.
• Создайте экземпляр клиента Apollo и настройте его для подключения к вашему GraphQL API.
• Оберните приложение Next.js компонентом ApolloProvider, который предоставляет экземпляр клиента всем компонентам.

// lib/apolloClient.js
import { ApolloClient, InMemoryCache } from '@apollo/client';

export const client = new ApolloClient({
  uri: '/api/graphql',
  cache: new InMemoryCache() // this is very important and this will tell apollo to cache data in memory 
});
// pages/_app.js
import { ApolloProvider } from '@apollo/client';
import { client } from '../lib/apolloClient';

export default function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

2. Реализуйте кеширование

• Клиент Apollo автоматически кэширует ответы от API GraphQL на основе используемых запросов.
• Чтобы реализовать кэширование, мы можем указать время жизни (TTL) для конкретных запросов, используя параметр fetchPolicy.
• Параметр fetchPolicy может иметь значение «сначала кеш», «кэш-и-сеть», «только кеш», «только сеть» или «без кэша».
• «Cache-first» — рекомендуемый вариант для данных, которые не изменяются часто и должны кэшироваться для оптимальной производительности.

import { gql } from '@apollo/client';
import { useQuery } from '@apollo/client';

const POSTS_QUERY = gql`
  query Posts {
    posts {
      title
      description
      author {
        name
      }
      image
    }
  }
`;

function Posts({ ttl }) {
  const { loading, error, data } = useQuery(POSTS_QUERY, {
    fetchPolicy: 'cache-first',
    ...(ttl && { context: { ttl } }),
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.posts.map((post) => (
        <li key={post.title}>
          <h2>{post.title}</h2>
          <p>{post.description}</p>
          <p>{post.author.name}</p>
          <img src={post.image} alt={post.title} />
        </li>
      ))}
    </ul>
  );
}

3. Запросить данные из GraphQL API

• В ваших компонентах Next.js вы можете использовать хук useQuery для запроса данных из API GraphQL.
• Клиент Apollo автоматически кэширует ответы на основе используемых запросов.

function Home() {
  return (
    <>
      <h1>Blog Posts</h1>
      <Posts />
    </>
  );
}

Вот и все! С помощью этих шагов вы сможете интегрировать Apollo Client с вашим приложением Next.js и внедрить кэширование для оптимизации производительности.

Другие полезные ссылки

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.