Why are my posts fetched with apollo cached (or so it seems) and how can I avoid this?-CodePudding

I'm learning React js and Graphql. My idea was to query my posts using @apollo/client in my getServerSideProps function, put them in a prop and pass them to the state.

When adding a mutation that deletes a post I made it so it will set the state again so the deleted post will disappear. However, what ends up happening is that the post will disappear, and will be deleted from the database. But when I refresh the page it is back again. Since it is deleted from the DB and getServerSideProps is supposed to run on every request I'm thinking maybe it has to do with caching but I have not been able to google a solution so far. Any help as to what's going on and how I could fix it would be appreciated.

export default function Posts({posts}) {
    const [postList, setPostList] = useState(posts);

    const postDeleted = ((deletedPostId)=> {
        setPostList(postList.filter((post) => {
            return post.id !==  deletedPostId;
        }))
    })

    return (
        <div>
            <h1 className={"text-4xl mb-5"}>Posts</h1>

            <div className="flex flex-wrap">
                {postList.map((post) => (
                    <div key={post.id} className={"md:w-1/3"}>
                        <PostPreview postDeleted={postDeleted} post={post}/>
                    </div>
                ))}
            </div>
        </div>
    )
}

export async function getServerSideProps() {
    const { data } = await client.query({
        query: gql`
        query Posts {
          posts {
            id
            title
            slug
          }
        }
      `,
    });

    return {
        props: {
            posts: data.posts,
        },
    };
}

CodePudding user response：

It sounds like the issue you're experiencing is that your GraphQL query is being cached by Apollo Client, which is causing the deleted post to reappear on the page after refreshing. This is likely happening because you are using the getServerSideProps function in your Next.js app, which runs on the server and is intended to provide initial data to a page when it is loaded. Because the getServerSideProps function is only run on the server, the Apollo Client cache is not aware of any changes that are made to the data on the client-side, so it continues to return the cached version of the data when the page is refreshed.

To avoid this issue, you can either disable caching for the Apollo Client instance that you are using in your Next.js app, or you can refetch the data for your posts query after a post is deleted to ensure that the updated data is returned from the server.

To disable caching for your Apollo Client instance, you can set the defaultOptions property of the ApolloClient instance to disable the cache option. This will prevent the Apollo Client cache from being used for any queries that are run using this instance.

const client = new ApolloClient({
  // Your existing Apollo Client configuration...
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'no-cache'
    }
  }
});