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?

light24bulbslight24bulbs 2,9413 gold badges24 silver badges34 bronze badges · Accepted Answer · 2021-07-03 19:32:10Z

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.

vanduc1102 5,8971 gold badge47 silver badges43 bronze badges · Accepted Answer · 2023-11-22 02:56:40Z

7

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

edited 57 mins ago

vanduc1102

5,8971 gold badge47 silver badges43 bronze badges

answered Aug 4, 2021 at 9:08

kai

711 silver badge1 bronze badge

1

4

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?

– Jeremy Caney

Aug 5, 2021 at 0:21

SuperStormer 5,1875 gold badges27 silver badges35 bronze badges · Accepted Answer · 2021-11-23 22:34:17Z

4

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.

edited Nov 23, 2021 at 22:34

SuperStormer

5,1875 gold badges27 silver badges35 bronze badges

answered Aug 27, 2019 at 16:16

Magnum

2,3094 gold badges17 silver badges23 bronze badges

1

Would this work for subscriptions as well?

– Aurinxki

Jun 9, 2021 at 16:30

score 1 · Accepted Answer · 2021-12-26 19:49:31Z

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: 'https://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;

GraphQL – Apollo Client without using hooks?