've got a creation page where I can add a new foodtruck, I use for that, axios with a post request.
//foodtruck create page
postAxiosAPI(`/foodtrucks`, data, userToken);
Then, on success, I redirect to the index page of all foodtruck
//foodtruck create pag
router.push('/foodtrucks/');
On my foodtruck index page, I want to use Apollo GraphQL to fetch all foodtrucks, its works fine with axios and useffect, but not with gql…
Here is how my index’s page :
export async function getServerSideProps() {
const { data } = await client.query({
query: gql`
query Foodtrucks {
foodtrucks {
title
}
}
`,
});
return {
props: {
foodtrucksApollo: data.foodtrucks,
},
};
}
const indexFoodtrucks = ({foodtrucksSSP, foodtrucksApollo}) => {
const [foodtrucks, setFoodtrucks] = useState({})
console.log(foodtrucksApollo, "foodtrucksApollo")
console.log(foodtrucks, 'dataFoodtruckInUseEffect')
useEffect(() => {
const getFoodtrucks = async () => {
const response = await fetch('http://localhost:1337/foodtrucks')
const data = await response.json()
setFoodtrucks(data)
}
getFoodtrucks()
}, [])
foodtrucksApollo didn’t get the last updated entry, I’m forced to reload the page to get it. foodtrucks with useEffect get all update entries…
My apollo-client
// ./apollo-client.js
import { ApolloClient, InMemoryCache } from "@apollo/client";
const API_URL = process.env.NEXT_PUBLIC_API_GRAPHQL_URL || "http://localhost:1337/graphql";
const client = new ApolloClient({
uri: API_URL,
cache: new InMemoryCache(),
});
export default client;