Сделайте запрос graphql вне JSX-компонента в Gatsby - PullRequest
Новая
       37

Сделайте запрос graphql вне JSX-компонента в Gatsby

0 голосов
/ 21 июня 2020

У меня есть файл .ts (не .tsx), который просто экспортирует объект json, например 

const obj = {
    img1: gql_img1,
    img2: gql_img2
}

Я хочу, чтобы gq1_img1 и gq1_img2 были результатами graphql query

Я нашел решение , которое использует Apollo Client, , но не похоже, что они используют Gatsby, и я не думаю, что Gatsby использует клиента.

Проблема с использованием useStaticQuery заключается в том, что это перехватчик, если я попытаюсь использовать его, как в приведенном ниже фрагменте, я получу "Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:"

const gql = () => {
    
    const gql = useStaticQuery(graphql
        `query adQuery {
            invoiceNinja300x250: file(
                extension: {regex: "/(jpg)|(jpeg)|(png)/"},
                name: {eq: "IN-300x250-2"}
            ){
                childImageSharp {
                    fluid(maxWidth: 250) {
                        ...GatsbyImageSharpFluid_withWebp_noBase64
                    }
                }
            },
            invoiceNinja600x300: file(
                extension: {regex: "/(jpg)|(jpeg)|(png)/"},
                name: {eq: "IN-600x300-2"}
            ){
                childImageSharp {
                    fluid(maxWidth: 250) {
                        ...GatsbyImageSharpFluid_withWebp_noBase64
                    }
                }
            }
        }`
        
        )
    return gql
}

    const GQL = gql()

Ответы [ 2 ]

0 голосов
/ 22 июня 2020

Рассматривали ли вы React Context API? В производственном приложении Gatsby я работаю над тем, что мы используем для глобальных переменных, таких как некоторые данные JSON / объекта. Это позволяет вам в каком-то компоненте высокого уровня / макета / уровня данных вставлять некоторые значения, которые вы получаете из другого файла, в свое приложение для использования с другими компонентами.

0 голосов
/ 22 июня 2020

Как я уже упоминал в вашем сообщении на Reddit, если вы не используете запрос страницы или запрос c, вам понадобится Apollo Client или какой-либо другой клиент gql.

Я обнаружил решение, которое использует Apollo Client, но не похоже, что они используют Gatsby, и я не думаю, что Gatsby использует клиента.

Gatsby и GraphQL-клиенты - разные вещи. Gatsby - это фреймворк React для создания веб-сайтов stati c, использующий graphQL для получения данных различными способами. Клиент GraphQL очень похож на fetch или ax ios, это библиотеки, используемые для запроса, публикации, обновления и удаления данных из REST API.

Не могли бы вы немного объяснить свой вариант использования? Может быть, есть способ сделать это больше, чем у Гэтсби.

...