makeVar with vue apollo requires react?

[smolinari]

Hey,

I'm trying to get makeVar (reactive variables) working, but it looks like it requires React's context system to be available? Anything in the works for Vue-Apollo? Or is there a way to trigger Apollo to re-query some other "Vue" way? I'm a bit nooby to all this, so go easy on me. 😁

Scott

[smolinari]

Ok. I think I solved this and it was fairly simple. Not sure it is "kosher".

What I did was create a ref and make it exportable.

export const userLoggedInRef = ref(false)

In the Apollo Link, I did this:

        if (message.includes('Invalid Token')) {
          LocalStorage.set('token', '')
          userLoggedInRef.value = false
          forward(operation)          
        }
      })

where message is from the GraphQL Error. (probably not completely correct using the message to figure out the error I know. I'm working on this)

In the Apollo client call for the cache, I added this:

      cache: new InMemoryCache({
        typePolicies: {
            Query: {
            fields: {
              userLoggedIn() {
                return userLoggedInRef.value;
              },
            },
          },
        },
      }),

I'm using the ref everywhere, but theoretically, I could query for the current value too...?

And for instance in my component for logging in, I have:

    const { mutate: login } = useMutation(Login_Mutation, 
    () => ({
      variables: {
        username: username.value,
        password: password.value
      },
      update: async (cache , { data: { login: { accessToken} } }) =>{
        console.log('this is the data: ', accessToken)
        if (!accessToken) {
          console.log('oops, you need to log in with the right credentials')  // TODO: need to do a proper error to the user
        } else {
          $q.localStorage.set('token', accessToken)
          userLoggedInRef.value = true
          onDialogHide()
        }
      }
    }))

Using the ref is just like Apollo's makeVar. I'm just not certain about the ref in the typePolicy, if that will cause that userLoggedIn query to refire or not. I'll keep playing with this to see what happens.

Scott

[Akryum]

it looks like it requires React's context system to be available?

No, it doesn't rely on React.

[smolinari]

Are you sure? I'm working with PNPM and a Rush monorepo and peer dependencies aren't automatically installed, so when I started calling makeVar Apollo client was breaking, because React wasn't being found. 🤷

Scott

[smolinari]

Ok. Nevermind. I have no idea what the heck happened, but trying makeVar again, and no errors like before about missing React. 🤷

Scott

[sschneider-ihre-pvs]

I think this may explain how.
https://www.thisdot.co/blog/state-management-with-apollo-client-and-vue-using-reactive-variable

[sschneider-ihre-pvs]

and concerning apollo, apollo/client has currently the dependency to react, apollo/client/core needs to be used. This will change with apollo/client v4
apollographql/apollo-client#8190