Request not being cached
Hi, I have a request for a JSON that is stored on the public folder of my nextjs 11 app, but it is not being cached. I am using it with axios, did I make anything wrong?
import axios from 'axios'
import { useQuery } from '@tanstack/react-query'
import { City, Country, Region } from '../types/countries-cities'
type CountriesAndCities = {
countries: Country[]
cities: City[]
regions: Region[]
}
async function fetchCitiesAndCountries() {
const [countries, states, cities] = await Promise.all([
axios.get('/data/countries.json'),
axios.get('/data/regions.json'),
axios.get('/data/cities.json')
])
const statesWithCities = states.data.filter((state: Region) =>
cities.data.some((city: City) => city.state_id === state.id)
)
const countriesWithStates = countries.data.filter((country: Country) =>
statesWithCities.some((state: Region) => state.country_id === country.id)
)
const sortedCities = cities.data.sort((a: City, b: City) => {
const cityA = a.name
const cityB = b.name
return cityA <= cityB ? -1 : 1
})
const sortedRegions = statesWithCities.sort((a: Region, b: Region) => {
const stateA = a.name
const stateB = b.name
return stateA <= stateB ? -1 : 1
})
const sortedCountries = countriesWithStates.sort((a: Country, b: Country) => {
const countryA = a.name
const countryB = b.name
return countryA <= countryB ? -1 : 1
})
return {
cities: sortedCities,
regions: sortedRegions,
countries: sortedCountries
}
}
export function useCountriesAndCities() {
const { data, isLoading } = useQuery<CountriesAndCities>(
['countriesAndCities'],
fetchCitiesAndCountries,
{
initialData: {
cities: [],
regions: [],
countries: []
}
}
)
return {
cities: data.cities,
regions: data.regions,
countries: data.countries,
loading: isLoading
}
}
import axios from 'axios'
import { useQuery } from '@tanstack/react-query'
import { City, Country, Region } from '../types/countries-cities'
type CountriesAndCities = {
countries: Country[]
cities: City[]
regions: Region[]
}
async function fetchCitiesAndCountries() {
const [countries, states, cities] = await Promise.all([
axios.get('/data/countries.json'),
axios.get('/data/regions.json'),
axios.get('/data/cities.json')
])
const statesWithCities = states.data.filter((state: Region) =>
cities.data.some((city: City) => city.state_id === state.id)
)
const countriesWithStates = countries.data.filter((country: Country) =>
statesWithCities.some((state: Region) => state.country_id === country.id)
)
const sortedCities = cities.data.sort((a: City, b: City) => {
const cityA = a.name
const cityB = b.name
return cityA <= cityB ? -1 : 1
})
const sortedRegions = statesWithCities.sort((a: Region, b: Region) => {
const stateA = a.name
const stateB = b.name
return stateA <= stateB ? -1 : 1
})
const sortedCountries = countriesWithStates.sort((a: Country, b: Country) => {
const countryA = a.name
const countryB = b.name
return countryA <= countryB ? -1 : 1
})
return {
cities: sortedCities,
regions: sortedRegions,
countries: sortedCountries
}
}
export function useCountriesAndCities() {
const { data, isLoading } = useQuery<CountriesAndCities>(
['countriesAndCities'],
fetchCitiesAndCountries,
{
initialData: {
cities: [],
regions: [],
countries: []
}
}
)
return {
cities: data.cities,
regions: data.regions,
countries: data.countries,
loading: isLoading
}
}
0 Replies