I would like to get started contributing to open source NextJS is my preferable ReactJS framework can I try this issue? How to check if the task is already taken?

@ravipula

In the client update that entity which should update the response of the query.

Do you mean to change the apollo query in the getServerSideProps?

Upon refreshing the page that is rendered with getServerSideProps function.

Does refreshing the page means hot load refresh? If you refreshing the page proactively, it will always execute
createApolloClient because the apolloClient is undefined

@sunOpar

Do you mean to change the apollo query in the getServerSideProps?

I mean to update that entity from the client side mutation. But the query that ran in the getServerSideProps doesn't know anything about the update that happened from client side.

Does refreshing the page means hot load refresh? If you refreshing the page proactively, it will always execute
createApolloClient because the apolloClient is undefined

It's just browser refresh and not hot load refresh. Which makes a call to the server and runs the getServerSideProps func. But at this point the earlier request to the page had executed the query and the response is stored in the cache. Even though we have updated the entity from the client mutation. This query would still return the cached response.

If it is in hot load refresh(dev mode) it would be fine. But this issue occurs when you are running it in production build.

Hope that info helps!

I have currently updated it evict the entity from the cache on every request so that if fetches info every time. This isn't an ideal solution in my opinion.

@ravipula

export async function getServerSideProps({ query }) {
  const apolloClient = initializeApollo()

  const res = await apolloClient.query({
    query: gql`
      query GetAllPosts {
        allPosts {
          author
        }
      }
    `,
  })

  return addApolloState(apolloClient, {
    props: { data: res.data },
  })
}

What I did are:

1. open browser and query data from getServerSideProps
2. change the server-side entities(add more allPosts entities etc.)
3. refresh the page

after that, I got the latest value from getServerSideProps query func.
I think i miss something to reproduce the issue, could you help me?

@sunOpar

I think i miss something to reproduce the issue, could you help me?

I think the apollo client is caching your query response but it is probably fetching new items since the query you are making doesn't really have an identifier to it. It is more prominent if you were actually querying a single item instead. For eg:

export async function getServerSideProps({ query }) {
  const apolloClient = initializeApollo()

  const res = await apolloClient.query({
    query: gql`
      query Post {
        Post {
            id
            author
        }
      }
    `,
  })

  return addApolloState(apolloClient, {
    props: { data: res.data },
  })
}

Try something like this, you'd be able to reproduce it. You might know but just as an FYI the id in the item is needed here as Apollo Client uses that and typename as an identifier to store in the cache. If at all there is no id then you'd have to specify a type policy to use some other value as an identifier.

Hope this helps and thank you for taking time to reproduce this.

How did you solve the same problem that keeps bothering me?

The default policy of Apollo Client should be cache first. It will query data from the cache first. If your data has been updated but the ID in the cache is the same, it will not fetch data from the server again

The first solution is:
Attempted to change the policy, using fetchPolicy = 'network-only ', which would lose the advantage of Apollo, fetching data from the server every time, no caching, and slower pages

The second solution is:
If the query does not query in getServersideProps, but instead in the page component, it can retrieve the latest data, but in this way, it will lose the SSR and cause the SEO to fail

I tried to change the policy to cache-and-network in getServersideProps, but Apollo gave an error and could only use cache-first or network-only

How can we solve this problem so that we can get the latest data and make the SSR effective?

In addition, I tried the method of clearing the cache after changing the data, but it didn't work, like this

export default async function resetStore() {
    await client.resetStore();
    await client.clearStore();
    cache.gc();
}

When I tried to clean it up, I ran this function, and strangely it didn't work，It's not the same origin policy issue, I'm doing it on the same domain name

@eugle

My code looks like this

export const getServerSideProps = async (context) => {
  const { params } = context;

  // Initialize Apollo
  const apolloClient = initializeApollo();

  // Get the Author from cache
  const identifier = apolloClient.cache.identify({
    __typename: 'Author',
    id: params.id,
  });

  // Evict from cache and
  apolloClient.cache.evict({ id: identifier });
  apolloClient.cache.gc();

  // The query runs here.
}

The issues with this implementation is that it will get the fresh data every single time the request is triggered to this page. You will have SSR but the item is cleared from the cache and added to the cache though it won't affect other items in the cache. I wasn't able to come up with a better solution for this as of now. Hope that helps.

@ravipula Thank you for the code example. Have you ever thought about using subscriptions for this purpose

@eugle

Thank you for the code example. Have you ever thought about using subscriptions for this purpose

I am actually not all that familiar with subscriptions and haven't thought about using since the issue is somewhat resolved for now. I'm not how that will fit into this setup though with all the inclusions of websockets and the apolloclient being on the server itself in this instance. Have to think in through.