如何使用 Gatsby 制作的网站改变 Strapi 中的数据？

Question

我想知道是否可以在使用 gatsby 制作的站点中编写变异查询。我要在 Strapi 中创建的数据不会用于显示新信息，它只会存储数据。

有没有办法做到这一点？据我所知，Gatsby 本身不会改变 Strapi 数据。

Answer 1

您需要为您的网站提供ApolloClient。最好的方法是在 gatsby-ssr.js 和 gatsby-browser.js 的根目录中，之后你可以像下面的例子那样使用 react-apollo

client.js

import ApolloClient from "apollo-boost"

const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1ZDRhN2FlNjRlYzE1MzIxMTY0N2EzNWMiLCJpc0FkbWluIjp0cnVlLCJpYXQiOjE1NjU1OTI2ODcsImV4cCI6MTU2ODE4NDY4N30.FZIWJ7sWhmQo6MPgUbY2Js-uVMWY1kUdASvr2oyY6Sd"
const url = "http://localhost:1337"

export default new ApolloClient({
  uri: `${url}/graphql`,
  request: operation => {
    operation.setContext({
      headers: {
        Authorization: `Bearer ${token}`,
      },
    })
  },
})

盖茨比-ssr.js 和盖茨比-browser.js


import React from 'react';
import { ApolloProvider } from 'react-apollo';
import { client } from './src/client';

export const wrapRootElement = ({ element }) => (
  <ApolloProvider client={client}>
    {element}
  </ApolloProvider>
);

postTemplate.js

import React from "react"
import { Mutation } from "react-apollo"
import gql from "graphql-tag"

const POST_MUTATION = gql`
  mutation PostMutation($description: String!, $url: String!) {
    post(description: $description, url: $url) {
      id
      createdAt
      url
      description
    }
  }
`
const PostTemplate = () => {
  const description = "example description"
  const url = "url"

  return (
    <Mutation mutation={POST_MUTATION} variables={{ description, url }}>
      {() => <button onClick={"... you'll implement this "}>Submit</button>}
    </Mutation>
  )
}

Export default PostTemplate

其他链接

如何使用 Gatsby 制作的网站改变 Strapi 中的数据？

How to mutate data in Strapi with a site made with Gatsby?

static-site

strapi

gatsby

headless-cms

client.js

盖茨比-ssr.js 和盖茨比-browser.js

postTemplate.js