typescript - Manipulera frågor innan de skickas till GraphQL

Vi använder apollo-client och apollo-server-express för att hämta data från ett enkelt översättnings-API.

Det är det nuvarande schemat:

type Query {
    translations(language: String!, key: String!): Translation!
}

type Translation {
    key: String!
    value: String!
}

Och lösaren:

export default {
  Query: {
    translations (obj, args, context, info) {
      return fetchApi('/api/v1/translation', {
        method: 'POST',
        body: JSON.stringify(args)
      })
    }
  }
}

I frontend-applikationen har vi en React-komponent som tar emot översättningsnyckeln i props och sedan kör frågan mot GraphQL-servern:

const translationQuery = gql`
query GetTranslations($language: String!, $key: String!) {
  translations(language: $language, key: $key) {
    value
    key
  }
}`

Just nu leder detta till GraphQL-anrop för VARJE översättning. Vad vi behöver är att samla alla översättningar och sedan utföra EN GraphQL-fråga. I princip vill vi använda en fråga som accepterar en lista med nycklar men fortfarande använda en dedikerad översättningskomponent:

type Query {
    translations(language: String!, keys: [String!]!): Translation!
}

type Translation {
    key: String!
    value: String!
}

Finns det ett sätt att uppnå det vi behöver?

Här är en förenklad version av hur översättningskomponenten är implementerad i frontend-applikationen: https://codesandbox.io/s/81n874zjp0

Svar #1

Ja, det finns ett enkelt sätt

Det är möjligt att skicka en array som ett argument till en fråga.

Du kan läsa mer om "GraphQL - Listor och Icke-Null" här

I din frågeoperation, istället för en enda key definierad som $key: String! kan du skicka in en array av icke-nullbara nycklar på detta sätt $keys: [String!]!

Du behöver också uppdatera din resolver-funktion för att hantera arrayen av nycklar och returnera antingen en enda Translation eller en array av Translation.

Och slutligen, se till att uppdatera ditt schema.

Om du endast utför API-anropet en gång och förväntar dig att få en enda Translation, bör det se ut ungefär så här:

type Query {
    translations(language: String!, keys: [String!]!): Translation!
}

type Translation {
    key: String!
    value: String!
}