GraphQL - Apollo Client without using hooks?

Question

I am attempting to use the Apollo GraphQL Client for React Native. However, in some parts of my app I need to do a mutation on the GraphQL data, in such a way that the interface should not be exposed to the user.

For instance, on my sign up page, I want to create a user in the database, but only after I have gone through and verified everything, created a uuid, etc. (things that require a class). If the call is sucessful, I want to imediately move on to the home page of the app. If not, I want to notify the user.

As such, I need access to do a GraphQL request, without hooks and just using callbacks to change the UI. Is this possible, and how could this be done?

Answer 1

// clients/apollo.ts

const apolloClient = new ApolloClient({
    uri: "/graphql",
    cache: new InMemoryCache()
})

// queries/customer.ts
const GET_CUSTOMERS = gql`
    query {
       getCustomers() {
           name
       }
    }
`


// components/somewhere.ts   
const result = await apolloClient.query({
    query: GET_CUSTOMERS ,
    variables: {}
})

Answer 2

The documentation does a bad job of explaining it, but you can simply call query or mutate on the ApolloClient object. https://www.apollographql.com/docs/react/api/core/ApolloClient/#apolloclient-functions

Compared to the other answer, this is probably better than making a raw call with just fetch because it uses the same cache layer as the rest of your application, instead of going around it.