AlaBenAicha

import React from "react";
import type { AppProps } from "next/app";
import { QueryClient, QueryClientProvider, Hydrate } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
import "../styles.css";

function MyApp({ Component, pageProps }: AppProps) {
  const [queryClient] = React.useState(() => new QueryClient());
  return (
    // Provide the client to your App

AlaBenAicha

import React from "react";
import axios from "axios";
import type { GetStaticProps, GetStaticPaths } from "next";
import { useQuery, QueryClient, dehydrate } from "react-query";
import { useRouter } from "next/router";
import PokemonCard from "../../components/PokemonCard";

const fetchPokemon = (id: string) =>
  axios
    .get(`https://pokeapi.co/api/v2/pokemon/${id}/`)

AlaBenAicha

// pages/_app.tsx

import React from "react";
import type { AppProps } from "next/app";
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

function MyApp({ Component, pageProps }: AppProps) {
  const [queryClient] = React.useState(() => new QueryClient());
  return (

AlaBenAicha

// pages/index.js

export async function getServerSideProps() {
  const { data } = await client.query({
    query: gql`
      query Countries {
        countries {
          code
          name
          emoji

AlaBenAicha

import { ApolloProvider } from "@apollo/client";
import client from "../apollo-client";

import "../styles/globals.css";

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

AlaBenAicha

// ./apollo-client.js

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
    uri: "https://countries.trevorblades.com",
    cache: new InMemoryCache(),
});

export default client;

AlaBenAicha

import { useState } from "react"
import { useSelector } from "react-redux"
import { pokemonApi, useGetPokemonByNameQuery } from "../services/pokemon"
import { initializeStore, removeUndefined } from "../store"

export default function Home(props) {
  const {data: pokemonList} = useSelector(pokemonApi.endpoints.getPokemonList.select())
  const [pokemon, setPokemon] = useState(props.initialPokemon)

  const {data: currentPokemon} = useGetPokemonByNameQuery(pokemon)

AlaBenAicha

import { createApi, fetchBaseQuery } from '@rtk-incubator/rtk-query';

// Define a service using a base URL and expected endpoints
export const pokemonApi = createApi({
  reducerPath: 'pokemonApi',
  // baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }), // uncomment for brokenness repro ur welcome :)
  baseQuery: async (baseUrl, prepareHeaders, ...rest) => {
    const response = await fetch(`https://pokeapi.co/api/v2/${baseUrl}`, rest)
    return {data: await response.json()}
  },

AlaBenAicha

import { configureStore } from '@reduxjs/toolkit';
import { pokemonApi } from './services/pokemon';
import { useMemo } from 'react'

let store

const initialState = {}

function initStore(preloadedState = initialState) {
  return configureStore({