Diizzayy / nuxt-graphql-client

⚡️ Minimal GraphQL Client + Code Generation for Nuxt3
https://nuxt-graphql-client.web.app
MIT License
366 stars 44 forks source link

Mutation for authorized users #204

Closed kuraiconnect closed 2 years ago

kuraiconnect commented 2 years ago

It is not possible to add a mutation that is only available to authorized users.

I add new mutation in mutations folder api/mutations/addSeller.gql it will only be available to authorized users. But when i added mutation I get an error: Cannot query field "addSeller" on type "Mutation".

i think problem with mutation because it will be available if add headers option:

how i can get access to this mutation when build my application?

Diizzayy commented 2 years ago

@Kuraiconnect is this error occurring at start time or when you attempt to execute the mutation?

kuraiconnect commented 2 years ago

@Diizzayy at start time

kuraiconnect commented 2 years ago

Maybe I can show this problem for find solution?

Diizzayy commented 2 years ago

at start time

@Kuraiconnect The problem here is that the graphql codegen is lacks the proper authorization, hence it's unaware of the addSeller mutation, The two main workarounds that come to mind is 1. manually linking to the schema and 2. authorizing the codegen with a token that has access to all the roles ( a PR is on the way that makes this possible ).

kuraiconnect commented 2 years ago

@Diizzayy thx for your answer. I try it later.

Now I use module for this and do not have problem with this mutation.

i add two dependencies on my project @apollo/client and @vue/apollo-composable

after i add this plugin on my project

import { defineNuxtPlugin } from '#app'
import { ApolloClient, InMemoryCache } from '@apollo/client/core'
import { DefaultApolloClient } from '@vue/apollo-composable'

export default defineNuxtPlugin((nuxtApp) => {
  const apolloClient = new ApolloClient({
    cache: new InMemoryCache(),
    uri: 'http://localhost:8080/v1/graphql',
  })
  nuxtApp.vueApp.provide(DefaultApolloClient, apolloClient)
})

and use mutation in component

const { mutate: createCompanyBuyer, loading } = useMutation(addSeller, {
  context: {
    headers: {
      'x-hasura-user-role': 'role',
      Authorization: `Bearer ${token}`,
    },
  },
})

and it's work for me, but I would like to use only your module later because it is very convenient and laconic

Diizzayy commented 2 years ago

@kuraiconnect Apologies for the delay here.

v0.1.25 was recently released as per #211, This allows you to specify additional headers that would only be passed to the GraphQL code generator. As mentioned in my previous response, the issue here is that the code generator is unathorized and hence unaware of the addSeller mutation. The solution here would be to provide the proper token and x-hasura-user-role headers as seen below.

export default defineNuxtConfig({
  modules: ['nuxt-graphql-client'],

  runtimeConfig: {
    public: {
      'graphql-client': {
        clients: {
          default: {
            host: 'https://api.spacex.land/graphql',
            token: 'super_secret', // token type is bearer by default
            codegenHeaders: {
              'x-hasura-user-role': 'role'
            }
          }
        }
      }
    }
  }
})

Given the exact configuration above, the following headers would be applied to the graphql code generator:

{
  "Authorization": "Bearer super_secret",
  "x-hasura-user-role": "role"
}