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?

Natch

Answer 1

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.

Hurter

Would this work for subscriptions as well? – Keep

Answer 2

// 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: {}
})

Latt

Welcome to Stack Overflow, and Thank you for contributing an answer. Would you kindly edit your answer to to include an explanation of your code? That will help future readers better understand what is going on, and especially those members of the community who are new to the language and struggling to understand the concepts. That's especially important when there's already an accepted answer that's been validated by the community. Under what conditions might your approach be preferred? Are you taking advantage of new capabilities? – Phio

Answer 3

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.

Benetta

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;

Biel