Is there an easy way to switch between remote schema-based queries and queries that use similar local-only fields?

Help
1

Currently, I have a GraphQL service endpoint that is accessed through a lambda function on a remote server. Access is restricted to clients from a known authorized host.

I would like to make the client open-source, but I don’t want to allow any locally hosted development client to access the GraphQL interface, due to transaction restrictions. Instead, I would like a locally running client to have access to a limited set of data cached in the browser’s local storage.

One thought would be to configure the client like so:

const isKnownHost = window.location.href === KNOWN_HOST

const client = new ApolloClient({
    link: isKnownHost? authLink.concat(httpLink) : null,     // is this even valid?
    cache: new InMemoryCache(/*locally cached values set up here*/),
});

Then, at runtime, use queries where all fields are local, so instead of:

const GET_OPENING_ADDITIONAL = gql`
    query getOpeningAdditional($fen: String!, $sites: [String]!) {
        getOpeningAdditional(fen: $fen, sites: $sites) {
            alsoKnownAs
            wins {
                w
                b
                d
            }
        }
    }
`;

the local client would use (ignore syntax errors):

const GET_OPENING_ADDITIONAL = gql`
    query getOpeningAdditional($fen: String!, $sites: [String]!) {
        getOpeningAdditional(fen: $fen, sites: $sites) {
            alsoKnownAs @client
            wins @client {
                w
                b
                d
            }
        }
    }
`;

Am I on the right track? Is there an alternative approach that’s less messy?

2

After having more time to think about it, I believe something like this will work:

const client = new ApolloClient({
    link: authLink.concat(httpLink),  // handles queries from known host
    cache: new InMemoryCache(...),  // this will handle @client queries from localhost 
});

The remote query will fail if from localhost, but it should instead be using a @client query, which can be ensured by use of a template literal:


// remote/client switcher:
const client = window.location.href.startsWith("http://ocalhost")? "@client" : ""; 

const GET_OPENING_ADDITIONAL = gql`
    query getOpeningAdditional($fen: String!, $sites: [String]!) {
        getOpeningAdditional(fen: $fen, sites: $sites) {
            alsoKnownAs ${client}
            wins $(client) {
                w
                b
                d
            }
        }
    }
`;

I hope it’s that simple, anyway.

3

Hi @Jeff_Lowery - did that approach work for you? Apologies, just noticed this thread now.