correct-apricot

Next.js 13, SSR & two queries while using hydration

I have an issue with making two calls at the same time - one from backend and one from client. For some reason I have console logs with public investments on server and client. Fromy my understanding, having the config like have (listed below), should perform everything on server side using SSR, without call on client. Any idea how to fix it?

import axios from "axios";

export const fetchPublicInvestments = async () => {
    console.log("Fetching public investments");
    const response = await axios.get("/api/public/investments").then((res) => res.data)
    console.log("public investments", response)
    return response
}

import axios from "axios";

export const fetchPublicInvestments = async () => {
    console.log("Fetching public investments");
    const response = await axios.get("/api/public/investments").then((res) => res.data)
    console.log("public investments", response)
    return response
}

my _app.js

import {useState} from "react";

import {
    Hydrate,
    QueryClient,
    QueryClientProvider,
} from '@tanstack/react-query'
import '@/styles/globals.scss'
import Layout from '@/components/Layout/Layout';
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000';

export default function App({ Component, pageProps }) {
    const renderWithLayout =
        Component.getLayout ||
        function (page) {
            return <Layout>{page}</Layout>;
        };

    const [queryClient] = useState(()=> new QueryClient())

  return renderWithLayout(
      <QueryClientProvider client={queryClient}>
            <Hydrate state={pageProps.dehydratedState}>
                <Component {...pageProps} />
            </Hydrate>
      </QueryClientProvider>
  );
}

import {useState} from "react";

import {
    Hydrate,
    QueryClient,
    QueryClientProvider,
} from '@tanstack/react-query'
import '@/styles/globals.scss'
import Layout from '@/components/Layout/Layout';
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000';

export default function App({ Component, pageProps }) {
    const renderWithLayout =
        Component.getLayout ||
        function (page) {
            return <Layout>{page}</Layout>;
        };

    const [queryClient] = useState(()=> new QueryClient())

  return renderWithLayout(
      <QueryClientProvider client={queryClient}>
            <Hydrate state={pageProps.dehydratedState}>
                <Component {...pageProps} />
            </Hydrate>
      </QueryClientProvider>
  );
}

my component:

export async function getServerSideProps() {
    const queryClient = new QueryClient()
    await queryClient.prefetchQuery({queryKey: "publicInvestment", queryFn: fetchPublicInvestments})

    return {
        props: {
            dehydratedState: dehydrate(queryClient)
        }
    }
}


export default function InvestmentsPublic() {
    const {isLoading, error, data, isFetching, isError} = useQuery({
            queryKey: ["publicInvestment"],
            queryFn: fetchPublicInvestments,
            staleTime: 60 * 24 * 10,
            refetchOnMount: false,
            refetchOnWindowFocus: false
        }
    );

}

export async function getServerSideProps() {
    const queryClient = new QueryClient()
    await queryClient.prefetchQuery({queryKey: "publicInvestment", queryFn: fetchPublicInvestments})

    return {
        props: {
            dehydratedState: dehydrate(queryClient)
        }
    }
}


export default function InvestmentsPublic() {
    const {isLoading, error, data, isFetching, isError} = useQuery({
            queryKey: ["publicInvestment"],
            queryFn: fetchPublicInvestments,
            staleTime: 60 * 24 * 10,
            refetchOnMount: false,
            refetchOnWindowFocus: false
        }
    );

}

2 Replies

absent-sapphire•3y ago

Your queryKey isn't in an array inside of getServerSideProps. You have queryKey: 'publicInvestment' instead of queryKey: ['publicInvestment'] there.

correct-apricotOP•3y ago

@DrewDeDude you da boss!!! 👑 thanks

Gaming

Programming

Next.js 13, SSR & two queries while using hydration

Did you find this page helpful?