Integrate with other GraphQL clients

Usage with Apollo

Apollo is a popular react GraphQL client, you can use Genql to generate a query string and variables object to be passed to useQuery.

typescript
import React from "react";
import { useQuery, ApolloProvider } from "@apollo/react-hooks";
import gql from "graphql-tag";
import { generateQueryOp } from "../generated/";

const Page = () => {
  const { query, variables } = generateQueryOp({
    countries: {
      __args: {
        filter: "US",
      },
      name: 1,
      code: 1,
    },
  });
  const { data, error } = useQuery(gql(query), {
    variables,
  });
  return <div>{JSON.stringify(data)}</div>;
};

Usage with any GraphQL client

Genql exposes the following functions to be used with other clients:

generateQueryOp

generateMutationOp

generatSubscriptionOp

These functions return a query string and a variables object that you can use with any GraphQL client.

typescript
const { query, variables } = generateQueryOp({
  countries: {
    __args: {
      filter: "US",
    },
    name: 1,
    code: 1,
  },
});

await fetch(`http://graphql.api/graphql`, {
  method: "POST",
  body: JSON.stringify({ query, variables }),
});