graphql-ruby-client

import { ApolloClient, InMemoryCache, ApolloProvider, HttpLink } from '@apollo/client'; import { createFetcher } from 'graphql-ruby-client'; // Assuming 'QueryName' and 'QueryName_variables' are generated from your .graphql files // In a real application, these would be imported from your generated code. const GENERATED_QUERY = { id: 'some-unique-query-id', document: `query SomeQuery($id: ID!) { user(id: $id) { id name email } }`, ast: { /* full GraphQL AST would be here */ }, variables: (id) => ({ id }), operationName: 'SomeQuery' }; // Configure the HTTP endpoint for your GraphQL Ruby server const httpLink = new HttpLink({ uri: 'http://localhost:3000/graphql' }); // Create a fetcher compatible with Apollo Link, using graphql-ruby-client's utility // This will handle the specific serialization/deserialization for graphql-ruby const clientFetcher = createFetcher({ link: httpLink, // In a production setup, you'd likely pass a more robust link chain }); const client = new ApolloClient({ link: clientFetcher, cache: new InMemoryCache(), }); // Example of executing a generated query async function fetchUser(userId: string) { try { const { data } = await client.query({ query: GENERATED_QUERY.document, variables: GENERATED_QUERY.variables(userId), operationName: GENERATED_QUERY.operationName, }); console.log('Fetched User:', data.user); return data.user; } catch (error) { console.error('Error fetching user:', error); throw error; } } // Example usage: fetchUser('123').then(user => { if (user) { console.log(`User name: ${user.name}`); } });