Apollo Imperative Store Usable about ember-apollo-client HOT 6 CLOSED

Nope. Would love to see that. Unsure if it's orthogonal to #20 or if it should be tackled at the same time. Do you have an idea of what changes would need to be made to support this?

from ember-apollo-client.

I'll read through #20 closer tomorrow, but a quick skim tells me yes and no. Yes, it's helpful, because those updates would automatically be shown, but no, because there is a separate API for writing directly to the local store. The only approach I know of this so far is how react-apollos handles it. I'll dig into that implementation and see what I can reason about.

Thanks for the quick response! I'm excited to see people actively finding this library and inquiring about it. Makes it a stronger library in the end!

from ember-apollo-client.

Okay, I did some more research on this.

Apollo's mutate can take an optional update function which is called after the server responds. Here is a simple example that adds a new link that was just mutated (createLink) into the store cache:

update: (store, { data: { createLink } }) => {
  const data = store.readQuery({ query: ALL_LINKS_QUERY })
  store.writeQuery({ query: ALL_LINKS_QUERY, data })
}

The best I can tell, I would propose that this function happen within mutate's then block. Looks like you should take the current store, the result of the mutation and pass them into the update function. The user then uses the Apollo API to manipulate the store.

Does this make sense?

from ember-apollo-client.

@DevanB @bgentry I'm heavily using the imperative store api for optimistic ui updates. This is a apollo-client feature not an react-apollo feature. You can just pass an update function to the apollo services mutate function.

Here some example:

apollo.mutate({
    mutation: DeleteWrapperMutation,
    variables: {wrapperId},
    optimisticResponse: {
        __typename: `Mutation`,
        deleteWrapper: true,
    },
    update(proxy, {data: {deleteWrapper: success}}) {
        if (!success) {
            return
        }
        const questionnaireFragment = proxy.readFragment({
            fragment: BlockMutateWrappersFragment,
            fragmentName: `BlockMutateWrappersFragment`,
            id: blockFragmentId,
        })
        questionnaireFragment.wrappers = questionnaireFragment.wrappers
            .filter(wrapper => wrapper.id !== wrapperId)
            .sort((w1, w2) => w1.sort - w2.sort)
        questionnaireFragment.wrappers.forEach((wrapper, i) => wrapper.sort = i + 1)

        proxy.writeFragment({
            fragment: BlockMutateWrappersFragment,
            fragmentName: `BlockMutateWrappersFragment`,
            id: blockFragmentId,
            data: questionnaireFragment,
        })
    },
})

from ember-apollo-client.

@n1ru4l This is great news! I literally just got it working, however I'm seeing odd warnings in my console about __typename missing (I know this is an ongoing issue that will soon be resolved!) and what could be warnings caused by other documents in my store that don't meet the schema I built.

@bgentry I'd love to help you and others that use this library by writing some documentation on the README on the update options usages; if this is something you would be prepared to merge in.

Additionally, you will probably see an influx of traffic to this add-on in the next 2-3 weeks as I wrap up the screencast and tutorial writing and it is published on How To GraphQL. I'd love to dedicate more time to helping maintain this library if you are looking for others to help you.

Thanks again!

from ember-apollo-client.

@DevanB I think it would be enough to add a link to http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient.mutate would be enough for the moment.
However having docs like the react-apollo docs would definitely encourage more users to use ember-apollo-client 🤔

from ember-apollo-client.