GraphQL - Apollo Client without using hooks? - react-native

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

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.

Answer 2

const apolloClient = new ApolloClient({
uri: "/graphql",
cache: new InMemoryCache()
})
const qr = gql`
query {
getCustomers() {
name
}
}
`
const result = await apolloClient.query({
query: qr ,
variables: {}
})

Answer 3

Yes, its possible.
A call to the GraphQL service simply expects a key-value pair of query or mutation in the body with the query/mutation you're trying to send.
You can do this with a simple fetch request as POST, or a cURL, or via postman... It doesn't really matter as long as its a POST request.
See also here.

Answer 4

Yes, It is possible as a matter of fact I am leaving sample classes that can be used for both query and mutation.
First, configure your application to work with graphQl.
Wrap your app with the provider.
import { client } from './config/connection';
import { ApolloProvider } from '#apollo/client';
<ApolloProvider client={client}>
<App/>
</ApolloProvider>
Here is the client that we want to
import { ApolloClient, ApolloLink, InMemoryCache } from '#apollo/client';
export const client = new ApolloClient({
cache: new InMemoryCache(),
uri: 'http://localhost:4000/graphql',
});
Operations.js (Contains Queries And Mutations gql)
import { gql } from '#apollo/client';
export const Query_SignIn = gql`
query Login($email: String!, $password: String!) {
login(email: $email, password: $password) {
name
}
}
`;
export const Mutate_SignUp = gql`
mutation SignUp($name: String!, $email: String!, $password: String!, $passwordConfirmation: String!) {
signUp(name: $name, email: $email, password: $password, passwordConfirmation: $passwordConfirmation) {
name
}
}
`;
A Class using query instead of useQuery hook
import { Query_SignIn } from '../../../operations';
class login {
constructor(client) {
this._client = client;
}
async signIn(email, password) {
const response = await this._client.query({
query: Query_SignIn,
variables: {
email,
password,
},
});
return response;
}
}
export default login;
A class using mutate instead of useMutation
import { Mutate_SignUp } from '../../../operations';
class register {
constructor(client) {
this._client = client;
}
async signUp(accountType, name, email, password, passwordConfirmation) {
const response = await this._client.mutate({
mutation: Mutate_SignUp,
variables: {
name,
email,
password,
passwordConfirmation,
},
});
return response;
}
}
export default register;